无法修复 twitter bootstrap 中的宽度答案

【问题标题】：Unable to fix the width in twitter bootstrap无法修复 twitter bootstrap 中的宽度
【发布时间】：2014-04-29 08:38:38
【问题描述】：

这是我第一次使用 twitter bootstrap。

我想将大小限制为 940 像素，为此我使用了 span12 类。但这似乎不起作用。整个内容广泛分布在整个页面中。

我该怎么做才能解决它？

这是代码：-

<body>
<div class="container">
  <div class="row">
    <div class="span12">
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">

                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Find Your Mac</a></li>
                    <li><a href="#">How it Works</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">FAQ</a></li>
                </ul>
            </div>
        </div>
    </div>
  </div>
</div>
</body>

【问题讨论】：

您所说的“在整个页面中广泛传播”是什么意思。
这似乎没问题jsfiddle.net/E72uF
@Andy897 这是复制问题的链接：- robocorp.in/design/index2.html

标签： html css twitter-bootstrap twitter

【解决方案1】：

navbar 固定在页面顶部。尽管span12 有一个width:940px，因为navbar 固定在顶部，但它需要100% 的宽度。

要解决此问题，请将宽度应用于.navbar-fixed-top，如下所示

.navbar-fixed-top{
    margin: 0 auto; //to align horizontally in center
    width: 940px;
}

【讨论】：

这似乎不起作用。直播链接：- robocorp.in/design/index2.html
我检查了链接，当我检查元素时，我没有看到应用的样式。上面的样式你添加到页面了吗？
是的，已应用。请在此处查看：- robocorp.in/design/css/main.css
是的，你是对的，当我检查页面上的元素时，我可以看到 margin:0 auto 应用于 .navbar-fixed-top，但我找不到 width:940px;。您可以尝试给!important 宽度吗？

【解决方案2】：

最简单的方法是将<div class="container">、<div class="row"> 和<div class="span12"> 放在固定导航栏中。由于导航栏是position: fixed;，因此它已从页面的正常流程中删除。您需要在导航栏中定义容器。在那之后，它似乎不值得将它嵌套在原来的那些中，所以不妨让它们成为兄弟姐妹。所以，像这样：

<div class="navbar navbar-fixed-top">
   <div class="container">
      <div class="row">
         <div class="span12">
            <div class="navbar-inner">
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Find Your Mac</a></li>
                    <li><a href="#">How it Works</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">FAQ</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="span12">
            <!-- page content -->
        </div>
    </div>
</div>

您可能需要调整特定的嵌套，但这应该可以解决眼前的问题。

【讨论】：