Html Twitter引导程序2上的右侧边栏_Html_Css_Twitter Bootstrap_Css Float_Sidebar

Html Twitter引导程序2上的右侧边栏

html css twitter-bootstrap

Html Twitter引导程序2上的右侧边栏,html,css,twitter-bootstrap,css-float,sidebar,Html,Css,Twitter Bootstrap,Css Float,Sidebar,我看过一些指南（包括一个或两个stackoverflow问题），但几乎所有人都说这是对内置于2.*中的1.4的修复从开始工作时，我尝试将pull right属性添加到divs的各个级别，但没有成功如何获得右侧边栏？您可以通过简单地布置三个div来获得流体三列引导设置，这三个div等于最高可能的网格设置，即。span12。因此，在本例中，我们使用了三个div，2x边栏.span3divs+1x.span6content div，并且都等于12 HTML <div class="navba

我看过一些指南（包括一个或两个stackoverflow问题），但几乎所有人都说这是对内置于2.*中的1.4的修复

从开始工作时，我尝试将

pull right

属性添加到

div

s的各个级别，但没有成功

如何获得右侧边栏？

您可以通过简单地布置三个div来获得流体三列引导设置，这三个div等于最高可能的网格设置，即

。span12

。因此，在本例中，我们使用了三个div，2x边栏

.span3

divs+1x

.span6

content div，并且都等于12

HTML

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">

    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project name</a>
      <div class="btn-group pull-right">

        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="icon-user"></i> Username
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Profile</a></li>
          <li class="divider"></li>
          <li><a href="#">Sign Out</a></li>

        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>

        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span3">

      <div class="well sidebar-nav">
        <ul class="nav nav-list">
          <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>

          <li class="nav-header">Sidebar</li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>

          <li><a href="#">Link</a></li>
          <li class="nav-header">Sidebar</li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>

      </div><!--/.well -->
    </div><!--/span-->
    <div class="span6">
      <div class="hero-unit">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>

      </div>
      <div class="row-fluid">
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div><!--/span-->

        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div><!--/span-->
        <div class="span4">
          <h2>Heading</h2>

          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div><!--/span-->
      </div><!--/row-->
      <div class="row-fluid">
        <div class="span4">
          <h2>Heading</h2>

          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div><!--/span-->
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>

        </div><!--/span-->
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div><!--/span-->
      </div><!--/row-->

    </div><!--/span-->
    <div class="span3">

      <div class="well sidebar-nav">
        <ul class="nav nav-list">
          <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>

          <li class="nav-header">Sidebar</li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>

          <li><a href="#">Link</a></li>
          <li class="nav-header">Sidebar</li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>

      </div><!--/.well -->
    </div><!--/span-->
  </div><!--/row-->

  <hr>

  <footer>
    <p>&copy; Company 2012</p>
  </footer>

</div><!--/.fluid-container-->













侧栏




侧栏






侧栏




你好，世界！
这是一个简单的营销或信息网站的模板。它包括一个称为“英雄单元”的大型标注和三个支持内容。把它作为一个起点来创造更独特的东西

标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。这是一种很好的调味品，是一种很好的调味品。这是一个很好的例子。Donec sed odio dui

标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。这是一种很好的调味品，是一种很好的调味品。这是一个很好的例子。Donec sed odio dui

标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。这是一种很好的调味品，是一种很好的调味品。这是一个很好的例子。Donec sed odio dui

标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。这是一种很好的调味品，是一种很好的调味品。这是一个很好的例子。Donec sed odio dui

标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。这是一种很好的调味品，是一种很好的调味品。这是一个很好的例子。Donec sed odio dui


侧栏




侧栏






侧栏





&抄袭；公司2012

演示：

您能给我们展示一下您的尝试吗？什么不按预期工作？我已尝试将

向右拉

属性添加到div类：

“容器流体”

，

“行流体”

，

“span3”

，

“井边栏导航”

和

“导航列表”

，但是，与其移动到屏幕的右侧，它所做的最好的事情是将其移动到左侧边栏的右侧。您是否可以显示html代码或Fiddle当响应样式表启动时（位于右侧），您是否希望边栏位于顶部？我以前回答过一个很像这个问题的问题，同样的方法也可以用来解决这个问题。嗯，实际上对于这个用例来说，右边的边栏在下面，左边的边栏在上面是最好的。不过，请展示您的解决方案，因为这可能会大大有助于回答我的问题：）