14

我从 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>

样式.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 等）

4

5 回答 5

33

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;
}
于 2012-10-16T21:00:45.853 回答
5

我遇到了完全相同的问题，并且使用 box-sizing 根本没有帮助。最终对我有用的唯一解决方案是使用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>

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

于 2013-05-30T12:28:05.117 回答
1

听起来你希望你的 div 保持在同一条线上，是吗？为此，您必须指定宽度并浮动它们。Div 往往总是希望彼此堆叠。

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

于 2012-10-16T20:41:12.633 回答
0

您也可以使用负边距：

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.

于 2013-10-09T10:11:27.930 回答
0

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

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

它似乎对我很有效。我不会错过像素。

于 2013-02-13T19:20:30.517 回答