Question

这是我第一次使用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>

Answer 1

navbar固定在页面顶部。即使span12有width:940px，因为navbar贴在顶部，但宽度为100％。

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

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

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

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

无法修复twitter bootstrap中的宽度

2 个答案: