Question

我从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添加边框会增加它们的宽度，我最终得到这个：

bootstrap span layout

span4和span8在堆叠时应该在同一条线上。我意识到我可以减少我的.css文件中的宽度并更正它，或者使用它：

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

但Bootstrap提供了解决此问题的方法（每次添加或删除边框时都不添加额外的CSS等）

Answer 1

bootstrap中的span类具有特定的宽度，因此添加边框会抛出该行的总数并强制它们换行。为了解决这个问题，我通常将边框样式放在带有span类的div内的div上。像这样：

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;
}

Answer 2

我有完全相同的问题，玩盒子大小没有任何帮助。最终对我有用的唯一解决方案是使用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>

现在，您不会因更改边距，填充或边框而遇到任何问题。

Answer 3

听起来你希望你的div保持同一条线，是吗？要做到这一点，你必须指定一个宽度并浮动它们。 Div往往总是想要叠加在一起。

这是一个小提琴：http://jsfiddle.net/me73v/

Answer 4

另一种选择是使用JQuery调整跨度宽度：

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

这似乎对我有用。我不会错过像素。

Answer 5

您也可以使用负边距：

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

这不是使用box-sizing: border-box，恕我直言的好解决方案，但如果你被迫使用box-sizing: content-box，那就值得注意它是否有效。

在Bootstrap中为span div添加边框会混淆布局

5 个答案: