Layout 在引导中向跨div添加边框会弄乱布局_Layout_Twitter Bootstrap

Layout 在引导中向跨div添加边框会弄乱布局

layout twitter-bootstrap

Layout 在引导中向跨div添加边框会弄乱布局,layout,twitter-bootstrap,Layout,Twitter Bootstrap,我从Twitter引导开始，有一个关于布局如何在其中发挥作用的问题。以下是HTML： <!DOCTYPE html> <html> <head> <title>Bootstrap Test</title> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <link rel="styl

我从Twitter引导开始，有一个关于布局如何在其中发挥作用的问题。以下是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>

将边框添加到span4和span8会增加它们的宽度，最后我得出以下结论：

span4和span8应在同一条线上堆叠。我意识到我可以在我的.css文件中减小它们的宽度并纠正这一点，或者使用以下方法：

但是Bootstrap是否提供了纠正这种情况的方法（不是每次添加或删除边框时都添加额外的CSS等）

听起来您希望您的div保持在同一条线上，是吗？为此，您必须指定一个宽度并使其浮动。div总是希望堆叠在彼此的顶部

这里有一个小问题：

引导中的span类具有特定的宽度，因此添加边框会使行的总宽度变小，并强制它们换行。为了解决这个问题，我通常将边框样式放在带有span类的div中的div上。大概是这样的：

HTML

另一个选项是使用JQuery调整跨度宽度：

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

它似乎对我很管用。我没有错过像素。

我也有同样的问题，玩盒子大小的游戏根本没有帮助。最后对我有效的唯一解决办法就是使用

与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>


A.
B
C

现在，更改页边距、填充或边框不会出现任何问题。

您也可以使用负页边距：

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

它不如使用

框大小调整：边框框

，IMHO好，但值得注意的是，如果您被迫使用

框大小调整：内容框

，

（可能是OT，抱歉），它甚至应该被标记为CSS吗？看起来你不是在寻找CSS解决方案，只是一个引导解决方案。如果有问题，我可以删除它，我是这里的新用户，在标记方面没有太多经验。这确实让人困惑：D我也准备好自己写一个CSS答案。这可能是一个重复的感谢你的答案，我意识到我可以使用CSS来调整div的宽度。我只是想知道Bootstrap本身是否提供了一种纠正此问题的方法。谢谢，这是一种合理的选择。一般来说，我会尽量避免在Bootstrap中向网格类添加您自己的样式，以避免与网格系统冲突。如果您想在

行中添加边框，然后在其中嵌套spans，该怎么办，谢谢这似乎是一个很好的解决方案，尽管它确实给divitis增加了一点。谢谢，我会尝试一下。不知道为什么人们会对此投反对票。有些人可能更喜欢jQuery解决方案。即使这不是最好的方法，也应该尽可能使用CSS，但根据具体情况，此解决方案可能更适合某些人。
$(".some-bordered-container [class*=span] ").each(function(index) {
    $(this).width($(this).width()-1);
});

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

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