اذهب إلى المحتوى

السؤال

نشر
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <title>bootstrap</title>
</head>
<body>


<div class="container ">
    <div  class = "row">
        <div >test</div>
        <div >test1</div>
        <div>test2</div>
        <div>test3</div>
        <div >test4</div>
    
    </div>
</div>


    <script src="./js/popper.min.js"></script>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/bootstrap.js"></script>
</body>
</html>

output : 

test

test1

test2

test3

test4

لماذا كلاس 'row' لا يعمل ؟

Recommended Posts

  • 0
نشر

عندما نقوم باستخدام الصنف row فيجب أيضاً استخدام الصنف col المستخدم في إعطاء كم column يجب أن يأخذ العنصر من مساحة الشاشة بهذا الشكل 

<div class="container ">
    <div  class = "row">
        <div class="col-lg-2" >test</div>
        <div class="col-lg-2">test1</div>
        <div class="col-lg-2">test2</div>
        <div class="col-lg-2">test3</div>
        <div class="col-lg-2">test4</div>
    
    </div>
</div>

وفي هذه حالة سوف تظهر العناصر بجانب بعضها ويأخذ كل عنصر مساحة 2 columnsمن مساحة 12 columns، لذلك قمت بتنفيذ ما أخبرتك به وفي حالك لم ينجح الأمر تأكد من الوصول الصحيح لملف  لملف CSS الخاص في Bootstrap

  • 0
نشر

رمزك يعمل بشكل صحيح عند تجربته مع التأكد من إضافة المسار للوصول لتنسيقات bootstrap للتعرف على الصنف row والصنف container لذلك تأكد من إضافة المسار بشكل صحيح 

<link rel="stylesheet" href="css/bootstrap.css">
                             ^^^^^^^^^^^

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...