Twitter引导程序固定布局问题

Question

使用Twitter引导程序，我的专栏出现了一个奇怪的问题。 设置一个行为类似于此处示例的测试页： http : //twitter.github.io/bootstrap/examples/hero.html 。 这是html：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">        
    <link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap-yii.css" />
    <link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap-responsive.min.css" />
    <script type="text/javascript" src="/assets/8b15478e/jquery.js"></script>
    <script type="text/javascript" src="/assets/24d7eb4f/js/bootstrap.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="span4" style="border: 1px solid red;"></div>
            <div class="span4" style="border: 1px solid red;"></div>
            <div class="span4" style="border: 1px solid red;"></div>
        </div>            
    </div>
</body>

应该产生上面链接中显示的结果，但是我在下一行得到了第三个span4 ，它被推到了前两个之下。 除此之外，容器的行为符合预期，即居中。

我在这里想念什么？

Answer 1

边框将像素增加到宽度，因此span4现在从300px增加到302px（左边框：1px +边框右边框：1px），因此进入下一行。 看这里

border: 1px solid red;

您可以给背景而不是边框进行测试。

检查小提琴

Answer 2

应用border会通过在span增加一些宽度来破坏布局。

.well元素是用于处理“列样式”的本机引导程序解决方案。

的HTML

<div class="row">
    <div class="span4">
        <div class="well well-with-my-style">
        </div>
    </div>
    <div class="span4"></div>
    <div class="span4"></div>
</div>

的CSS

.well-with-my-style {
    border: 1px solid red;
    background: none;
    /* whatever... */
}

这样，您将尊重本机布局并从.well元素中获利，但请记住，您必须使用自己的.well样式（使用.well-with-my-style类）来覆盖。

Twitter引导程序固定布局问题

问题描述

2 个解决方案

解决方案1
0 已采纳 2013-04-18 09:34:18

解决方案2
0 2013-04-18 10:09:01

Twitter引导程序固定布局问题

问题描述

2 个解决方案

解决方案1 0 已采纳 2013-04-18 09:34:18

解决方案2 0 2013-04-18 10:09:01

解决方案1
0 已采纳 2013-04-18 09:34:18

解决方案2
0 2013-04-18 10:09:01