Question

刚开始使用twitter bootstrap。到目前为止很棒，直到我遇到一些我无法开始工作的东西。

基本上我正在尝试使用右侧的内容区域做一个简单的左侧导航栏/列。根据我发现的一切，我应该能够在“行”div中使用“span2”和“span10”对div标签执行以下操作。

但是，我尝试跨度的所有内容总是拉伸100％的可用宽度，然后下一个跨度将在新行中插入下方。

bootstrap CSS正在运行......我可以制作响应式导航栏和各种各样的。只是这种跨度的情况让我失望。

这有什么不足之处吗？最简单的实现？

<link href="css/bootstrap.css" rel="stylesheet">

<html>
  <body>
    <div class="container">
      <div class="row">
        <div class="span2">Nav bar</div>
        <div class="span10">Content</div>
      </div>  
    </div>
  </body>
</html>

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="bootstrap/dist/js/bootstrap.min.js"></script>

为了记录，我在ASP.Net和IE10中构建它。

谢谢，不然。

Answer 1

好问题Nay;

Bootstrap3与Bootstrap2不同。

尝试将范围更改为 col-md - * （或col-xs）

<div class="container">
  <div class="row">
    <div class="col-md-2">Nav bar</div>
    <div class="col-md-10">Content</div>
  </div>  
</div>

此博客帮助我更详细地了解http://www.helloerik.com/bootstrap-3-grid-introduction。

希望这有帮助！

Answer 2

根据您的描述，我假设您使用的是Bootstrap 2.简单的布局看起来像这样：

<div class="container">
    <div class="row">
        <div class="span2">
            <div class="well">
                <h1>Stuff</h1>
            </div>
        </div>
        <div class="span10">
            <div class="well">
                <h1>stuff</h1>
            </div>
        </div>
    </div>
</div>

容器使页面居中，行包围列（即跨度），well类只是占位符。您只需要记住列应该始终是一行包装（如上图所示）。

如果您想要一些响应，可以添加bootstrap-responsive.css文件。此外，请务必在<meta name="viewport" content="width=device-width, initial-scale=1.0">中加入<head>，以便响应能力对设备生效。

希望有所帮助。

Answer 3

尝试将跨度的最大计数设为11。

 <html>
  <body>
    <div class="container">
      <div class="row">
        <div class="span2">Nav bar</div>
        <div class="span9">Content</div>
      </div>  
    </div>
  </body>
</html>

使用此功能，它将起作用。

如果我使用12的总跨度，我也会遇到同样的问题。但它适用于11

Twitter Bootstrap - Spans拒绝工作

3 个答案: