Загрузочный контейнер Bootstrap 3 не 100%

Вопрос

Я думаю о внедрении Bootstrap 3 в свой проект и тестирую некоторые его функциональные возможности и свойства, прежде чем переключаться на эту интерфейсную среду.

Странная вещь, которую я заметил, заключается в том, что жидкий контейнер Bootstrap на самом деле не занимает 100% ширины области просмотра (обратите внимание на линию в 1 пиксель справа от розового элемента Bootstrap):

image

Вот как выглядит мой HTML. Это в основном шаблон Bootstrap по умолчанию.

<!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">
        <title>Page title</title>
        <link rel="stylesheet" href="css/bootstrap.css"> <!-- Core CSS -->
        <link rel="stylesheet" href="css/test.css"> <!-- Custom CSS -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="full-width">This is not bootstrap</div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    This is Bootstrap
                </div>
                <div class="col-md-9">
                    This is Bootstrap too
                </div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

Очевидно, я использую стандартную последнюю версию загрузочной версии CSS и свой собственный CSS:

.full-width {
    width: 100%;
    background-color: #808080;
}
.col-md-3 {
    background-color: #4f4;
}
.col-md-9 {
    background-color: #f4f;
}

Почему этот контейнер для жидкости не занимает 100% ширины? Хотя это всего лишь 1 пиксель, это определенно разрушит мой дизайн страницы.

Выпуск отдыха

Я создал jsfiddle по запросу относительно этой проблемы: http://jsfiddle.net/J6UE5

Чтобы воссоздать мою проблему, измените размер окна просмотра с помощью Safari (7.0.5) на Mac под управлением OS X 10.9.4. Вы заметите, что линия 1px на правой стороне розового контейнера появляется и исчезает при изменении размера. Как только зеленый и розовый контейнеры сложены (поведение Bootstrap), линия 1px исчезает, и все становится на 100% шириной.

Ответы

Ответ 1

Элемент

.container добавляет дополнение 15px в Bootstrap.

.row имеет отрицательные левые и правые поля 15px, а

.column имеет 15px дополнение.

Переопределите значения заполнения контейнеров в вашем CSS (и обязательно разместите их после кода boostrap, чтобы он правильно перезаписывался).

.container { 
  padding: 0px;
}

Подробное объяснение того, как работают контейнеры, жидкостные контейнеры, строки и столбцы.

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

Ответ 2

 <div class="row" style="margin-left: -30px; padding: 0px;  background-color: rgba(255, 3, 53, 0.49);">
     <div class="col-lg-12">
           <p style="color: green;">Foo</p>
         </div>
</div>

Ответ 3

Вы добавили эту строку в свой собственный файл css!

body {
       width: 100%;
       margin: 0%;    
}

/ ******************************************* ****************************************/

<!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">
        <title>Page title</title>
        <link rel="stylesheet" href="css/bootstrap.css"> <!-- Core CSS -->
        <link rel="stylesheet" href="css/test.css"> <!-- Custom CSS -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style type="text/css">
            .full-width {
                max-width:100%;
                top:0;
                left:0;
                min-height: 100%;
                min-width: 1024px;
                background-color: #808080;
            }
            .col-md-3 {
                background-color: #4f4;
            }
            .col-md-9 {
                background-color: #f4f;
            }

            body {
                width: 100%;
                margin: 0%;
            }
        }
    </style>

    </head>
    <body>
        <div class="full-width">This is not bootstrap</div>
        <div class="container-fluid">
            <div class="col-md-12">
            <div class="row">
                <div class="col-md-3">
                    This is Bootstrap
                </div>
                <div class="col-md-9">
                    This is Bootstrap too
                </div>
            </div>
        </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

Ответ 4

пытается воссоздать эту проблему и не может показаться

попробуйте изменить bootstrap css, bootstrap.css на bootstrap.min.css

edit: есть ли какие-либо другие css файлы, которые вы нажимаете быстро http://www.bootply.com/OOpfKfAAMh, показывает, что он работает отлично, не имеет 1px пробела на сторона

Ответ 5

.container-fluid { 
  padding-right:0;padding-left:0;
  margin-right:-15px;margin-left:-15px
}