لماذا لا يستخدم عرض الجهاز في bootstrap العرض الكامل للمتصفح الخاص بي؟

https://stackoverflow.com//questions/22003563

20-12-2019
|

سؤال

أحاول اتباع برنامج تعليمي لـ Bootstrap ولكن يبدو أن القسم الأول الذي أقوم بإنشائه، والذي يجب أن يمتد على كامل عرض المتصفح/الجهاز، يقتصر على 1000 بكسل تقريبًا.أي أفكار لماذا هذا؟

هذا هو الكود الخاص بي:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testing the Bootstrap 3.0 Grid System</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style>
    .col-xs-12 {
        height: 100px;
        background-color: blue;
        color:white;
        text-align: center;
    }
    </style>
</head>
<body>
    <div class="container">
    <div class="row">
        <div class="col-xs-12">.col-xs-12</div>
    </div>
</div>

</body>
</html>

شكرا مقدما على أي مساعدة.

المحلول

إذا كنت تستخدم الإصدار 3.1 الأحدث، فيمكنك استخدام container-fluid الصف بدلا من container مثله..

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">.col-xs-12</div>
    </div>
</div>

3.1 العرض الكامل: http://www.bootply.com/116382

بالنسبة إلى Bootstrap 3.0.x، ستحتاج إلى استخدام حاوية مخصصة مثل هذه...

.container-full {
  margin: 0 auto;
  width: 100%;
}

3.0 العرض الكامل: http://www.bootply.com/107715

نصائح أخرى

فئة الحاويات لديها عرض محدد حسب استعلام الوسائط.المحتوى الخاص بك ضمن هذا div بحيث يكون عرضه بناء عليه.

يمكنك أن ترى هذا في أدوات DEV في جميع المتصفحات الرئيسية، ابحث عن هذا العنصر وعرض أنماط / خصائص CSS.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow