推特引导-Spans拒绝工作

刚刚开始使用twitter引导程序。到目前为止太棒了，直到我遇到一些无法上班的事情。

基本上，我试图做一个简单的左侧导航栏/列，在右侧有一个内容区域。根据我所发现的一切，我应该能够在"行"div中使用"span2"one_answers"span10"对div标签来完成以下操作。

然而，我尝试的每一个跨度总是拉伸100%的可用宽度，然后下一个跨度将在下面的一条新行中插入。

引导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中构建这个。

谢谢，不。

不错的问题不是；

引导程序3与引导程序2不同。

尝试将span更改为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.

希望这能有所帮助！

根据您的描述，我假设您使用的是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文件。此外，请确保在<head>中包含<meta name="viewport" content="width=device-width, initial-scale=1.0">，以便响应在设备上生效。

希望能有所帮助。

尝试将跨度的最大计数设置为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

相关内容

最新更新

热门标签：