我想设计我的容器和跨度

Question

我最近正在密切关注 twitter bootstrap 以创建我的团队网站， 但我面临一个阻碍我的问题。 所以有我的身体：

  <div class="container">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="index.html">Acceuil</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="membres.html">Membres</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="videos.html">Vidéos</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="forum.html">Forum</a></li>
                    <li class="divider-vertical"></li>
                </ul>
 <div class="row">
 <div class="span9">
    Column 1
 </div>
 <div class="span3">

   Column2
 </div>
</div>
 </div></i>

我希望导航栏在我的容器周围继续边框，但我不知道该怎么做，我使用基本版本的 twitter bootstrap。 如果有人知道该怎么做请告诉我。 http://jsbin.com/cesorozu/1/edit 这就是我想要的 http://puu.sh/aH4bG/27021ae1ab.jpg

谢谢 Psyko460

Answer 1

根据你分享的代码和图片，我认为你可以在span9和span3 div中使用另一个div，但你应该小心边框，你可以设置自己的高度：

.bordered{
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   border:1px solid black;
   height:400px;
 }

这里是JS Bin

如果您不希望您的 div 处于边缘，请将您的跨度网格缩小，例如 span8 与 span3。它们最终不会达到 12 个，因此您将拥有 div 的空间。然后简单地给你的内部 div 提供 margin-left 来移动它们（在这个例子中，div 的类为“.bordered”）。

这是一个例子：JS Bin

希望这会有所帮助。