Почему у класса начальной загрузки .row по умолчанию оставлено поле слева -30px?

Когда я делаю boostrap, мне нужно использовать класс "row"...

Когда вы посмотрите на мой тестовый проект:

Почему я вынужден с левым краем -30px?

С этим html я ожидал бы, что 3 строки будут разделять каждый столбец на 33% от всей доступной ширины:

<div class="container">
    <div class="row">
        <div style="background-color: pink;" class="span4">
            This is a label
        </div>
        <div style="background-color: violet;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: slateblue;" class="span4">
            This is a button
        </div>
    </div>

    <div class="row">
        <div style="background-color: orange;" class="span4">
            This is a label
        </div>
        <div style="background-color: orangered;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: yellow;" class="span4">
            This is a button
        </div>
    </div>

    <div class="row">
        <div style="background-color: seagreen;" class="span4">
            This is a label
        </div>
        <div style="background-color: green;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: lightgreen;" class="span4">
            This is a button
        </div>
    </div>    

</div>

Серая область с кнопками из этого кода:

<div style="background-color: gray;">
    <div class="pager">
        <div class="pull-left">
            <a href="#" class="btn" data-bind="css: { disabled: !hasPrevious() }, click: previous">previous</a>
            <a href="#" class="btn" data-bind="css: { disabled: !hasNext() },     click: next">next</a>
        </div>
        <div class="pull-right">
            <span data-bind="text: stepNumber()" />
            <span>/</span>
            <span data-bind="text: stepsLength" />
        </div>
    </div>
    <hr />

    <!-- ko compose: { model: activeStep,
        transition: 'entrance' } -->
    <!-- /ko -->
</div>

Почему весь дизайн из трех столбцов падает вместе, когда я удаляю -30px margin-left?
Как мне изменить свой код, чтобы действительно получить раскладку из трех столбцов, каждый столбец имеет одинаковую ширину. Это то, что должен сделать span4.

Ответ 1

вопрос 1:

span все имеют margin-left of 30px, чтобы создать некоторое пространство между отдельными блоками. это пространство должно отображаться между одиночными span и не в начале (или конце) row. для этого есть несколько возможностей - например:

создать отрицательный margin с пробелом в строке (это то, что делает bootstrap)
используйте селектор :first-child, чтобы удалить margin-left на первом span в строке
[продолжение следует]

Я могу только предположить, что bootstrap использует первый вариант, потому что он более совместим со старыми браузерами (скорее всего, IE 7 и ниже).

небольшой пример: скажем, ваш span имеет ширину 100, пробел 10 и есть 3 строки.

Ваша общая ширина строки в этом случае должна быть 320 (100 + 10 + 100 + 10 + 100 = 320)
один диапазон имеет ширину 110 (100 ширина + 10 магических левых)
- просто добавив, что эти цифры дадут вам ширину 330 и уродливое пространство 10 в начале ( 10 + 100 + 10 + 100 + 10 + 100 = 330)
- "вычесть" 10 одним из перечисленных методов ( -10 + 10 + 100 + 10 + 100 + 10 + 100 = 320)
  - Ура, мы создали великие вещи с силой математики

вопрос 2 если вы используете span4 s, у вас уже есть 3 столбца одинаковой ширины. вам ничего не нужно менять.

Ответ 2

Класс row добавляет

clearfix
отрицательный margin-left
отрицательный margin-right

Bootply: http://www.bootply.com/120858

С отрицательным запасом в начале:

<div class="row">            
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

Без отрицательного поля в начале:

<div>     
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

Ответ 3

Потому что вам больше не нужно использовать струйную жидкость. Все строки do выполняют cleafix и применяют отрицательный запас. Это обычно правильно для точной сетчатой системы. Вы можете использовать контейнеры или вместо "строки" вы просто используете "clearfix", и у вас будет такое же поведение, как и раньше, без полей.

Ответ 4

Одним из способов решения этой проблемы является использование class="container row" вместо class="row", это решение позволит разместить строку внутри контейнера без горизонтального переполнения.

Ответ 5

Если вы находитесь в режиме Fluid и используете меньше, mixin очень полезен: .offsetFirstChild(@columns)

(см. mixin.less of Bootstrap)

Ответ 6

Использовать jQuery:

$('<div>Test</div>').addClass('row').css("margin-left", 0).css("margin-right", 0).appendTo('.content');

Ответ 7

Чтобы не использовать "контейнер" в отдельном "div", почему бы не определить определенный класс в пользовательском CSS? Я использую:

.nomargin {margin: 0;}

и в HTML:

<div class="row nomargin">
 …
 </div>

Тот же результат, но более читаемый.