0

我的专栏使用 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在下一行得到第三个，它首先被推到两个下面。除此之外，容器的行为与预期一样，即居中。

我在这里想念什么？

4

2 回答 2

0

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

border: 1px solid red;

你可以给一个背景而不是边框​​来测试。

检查小提琴

于 2013-04-18T09:34:18.913 回答
0

应用 aborder通过向 s 添加一些宽度来破坏您的布局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类）覆盖样式。

于 2013-04-18T10:09:01.170 回答