Bootstrap 3.3 堆叠导航栏内容

Question

我正在设计一个需要垂直导航栏的网页（Bootstrap 3 中的堆叠导航栏），但内容似乎有点棘手，因为所有内容都显示在整个导航栏下方。

其实我想把面板放在页面的左边，内容放在右边，就像一个垂直菜单。

我试过用row-col（Bootstrap网格系统），但是当我点击下面的标签时，内容似乎是浮动的。

这是我在没有网格系统的情况下使用的代码：

<div class="container">
    <div class="tab-pane active">
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#user1" data-toggle="tab">Panel1</a></li>
            <li><a href="#user2" data-toggle="tab">Panel2</a></li>
            <li><a href="#user3" data-toggle="tab">Panel3</a></li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane fade active in" id="user1">
                <p>This is panel1</p>
            </div>
            <div class="tab-pane fade"  id="user2">
                <p>This is panel2</p>
            </div>
            <div class="tab-pane fade" id="user3">
                <p>This is panel3</p>
            </div>
        </div>
    </div>
</div>

有人可以帮帮我吗？谢谢！

Answer 1

要获得您正在寻找的功能，您将不得不使用网格系统。下面是一个片段中的例子。在运行代码段后全屏查看以更好地查看它。

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#user1" data-toggle="tab">Panel1</a></li>
            <li><a href="#user2" data-toggle="tab">Panel2</a></li>
            <li><a href="#user3" data-toggle="tab">Panel3</a></li>
        </ul>
        </div>
        
        <div class="col-sm-6">
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="user1">User 1 info</div>
          <div role="tabpanel" class="tab-pane" id="user2">User 2 info</div>
          <div role="tabpanel" class="tab-pane" id="user3">User 3 info</div>
        </div>
      </div>
    </div>
  </div>

Answer 2

适用于 col 类。你的意思是 this?

Bootstrap 3.3 堆叠导航栏内容

Bootstrap 3.3 stacked nav bar content

html

css

twitter-bootstrap