Добавление границ в span divs в Bootstrap нарушает макет

Я начинаю с Twitter Bootstrap и задаюсь вопросом о том, как в нем работает макет. Вот HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Test</title>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script  src="http://code.jquery.com/jquery-latest.js"></script>
        <script  src="bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="span4">a</div>
                <div class="span8">b</div>
            </div>
            <div class="row">
                <div class="span12">c</div>
            </div>
        </div>
    </body>
</html>

style.css:

div.container
{
    background-color:#aaa;
}
div.span4, div.span8, div.span12
{
    background-color:#eee;
    border: 1px solid #888;
    border-radius:3px;
}

Добавление границы к span4 и span8 увеличивает их ширину, и я получаю следующее:

span4 и span8 складываются, пока они должны находиться в одной строке. Я понимаю, что могу уменьшить их ширину в моем .css файле и исправить это или использовать это:

http://paulirish.com/2012/box-sizing-border-box-ftw/

но Bootstrap предоставляет средства для исправления этого (не добавляя дополнительный CSS каждый раз, когда я добавляю или удаляю границу и т.д.)

Ответ 1

Классы span в бутстрапе имеют определенную ширину, поэтому добавление границы отбрасывает общее число для строки и заставляет их обертывать. Чтобы обойти это, я обычно ставил стиль границы на div внутри div с классом span. Что-то вроде этого:

HTML

<div class="row">
   <div class="span4">
       <div>a</div>
   </div>
   <div class="span8">
       <div>b</div>
   </div>
</div>

CSS

.span4 > div, .span8 > div
{
   background-color:#eee;
   border: 1px solid #888;
   border-radius:3px;
}

Ответ 2

У меня была точно такая же проблема, и игра с размером коробки не помогла вообще. Единственным решением, которое в итоге работало для меня, было использование row-fluid.

Разница с row-fluid заключается в том, что они основаны на процентах, а не фиксированных пикселях. Затем дочерние элементы в строке всегда добавляют до 12 вместо того, чтобы добавлять к их родительской ширине диапазона в рядах ширины обычного пикселя.

Так, например, ваш теперь будет

<div class="container">
    <div class="row-fluid">
        <div class="span4">a</div>
        <div class="span8">b</div>
    </div>
    <div class="row-fluid">
        <div class="span12">c</div>
    </div>
</div>

Теперь у вас нет проблем с изменением полей, paddings или границ.

Ответ 3

Похоже, вы хотите, чтобы ваши дивы оставались на одной линии, да? Для этого вам нужно будет указать ширину и поместить их. Divs, как правило, всегда хотят складываться друг на друга.

Здесь сценарий: http://jsfiddle.net/me73v/

Ответ 4

Другой вариант - настроить ширину пролета с помощью JQuery:

$(".some-bordered-container [class*=span] ").each(function(index) {
    $(this).width($(this).width()-1);
});

Кажется, это хорошо работает для меня. Я не пропускаю пиксели.

Ответ 5

Вы также можете использовать отрицательные поля:

div.span4, div.span8, div.span12
{
    background-color: #eee;
    border: 1px solid #888;
    border-radius: 3px;
    margin: -1px;
}

Это не столь хорошее решение, как использование box-sizing: border-box, IMHO, но стоит просто заметить, что это работает, если вы вынуждены использовать box-sizing: content-box.