css 的布局问题（twitter bootstrap）答案

【问题标题】：layout issues with css (twitter bootstrap)css 的布局问题（twitter bootstrap）
【发布时间】：2012-02-10 09:36:15
【问题描述】：

我正在使用css styles from Twitter Bootstrap，但我似乎无法将我的“span16”div 与我的面包屑容器对齐。面包屑容器是我需要的大小。我附上了一张截图来显示这个问题。

这是我的 HTML：

<div class="container">
    <ul class="breadcrumb" style="margin-top: 10px;">
        <li><a href="search.php">Search</a>&raquo;</li>
        <li class="active">Basic</li>
    </ul>

    <div class="row">
        <div class="span16 well">
            <form id="form_id" action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
                <div class="row">
                    <div class="span-one-third">
                        Span 1/3
                    </div>
                    <div class="span-one-third">
                        Span 2/3
                    </div>
                    <div class="span-one-third">
                        Span 3/3
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

您可以查看全文here

知道问题是什么吗？

【问题讨论】：

我猜测 ul 或 li 标签上有右侧填充或边距，但如果没有看到完整的 css，我们无法仅从 html 中分辨出来。可以发一个完整页面的链接吗？
Ben：我修改了问题并将 URL 发布到页面。谢谢，保罗

标签： html css twitter-bootstrap

【解决方案1】：

span16 比容器宽。面包屑受容器宽度的限制。增加容器的大小将使面包屑匹配。

【讨论】：

将容器更改为 980 效果很好。现在一切都排好了。谢谢！

【解决方案2】：

.span16 {} 的静态宽度为 940，但它也应用了 19 像素的填充，因此它是 940 + 2x19

【讨论】：

是的，就是这样。改变你的 span16 宽度和你的三分之一类（到 286px）