【问题标题】:Can I nest a grid inside my bootstrap tab-pane?我可以在我的引导选项卡窗格中嵌套一个网格吗?
【发布时间】:2014-03-22 18:28:35
【问题描述】:

我在我的页面中使用 Bootstrap 导航选项卡,如下所示:

<div class="container-fluid">

     <div class="row-fluid">
        <div class="span2">
        </div>
        <div class="span10">
            <!--Body content-->


<div class='row>
  <div class='span8'>
    <ul class="nav nav-tabs" id="myTab">
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#profile">Profile</a></li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane active" id="home">...</div>
      <div class="tab-pane" id="profile">...</div>
    </div>

    <script>
      $(function () {
        $('#myTab a:last').tab('show');
      })
    </script>
  </div>
</div>


        </div>
     </div>
</div>

我想在我的选项卡窗格中组织一个网格, 我试过这个:

<div class='row'>
    <div class='span4'>...</div>
    <div class='span4'>...</div>
</div

在窗格中,但这不起作用。

如何使用引导程序在我的选项卡窗格中嵌套列?

【问题讨论】:

    标签: twitter-bootstrap sass


    【解决方案1】:

    这对我有用http://jsfiddle.net/rKaaq/

    <div class="row">
      <div class="span8">
        <ul class="nav nav-tabs" id="myTab">
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#profile">Profile</a></li>
        </ul>
    
        <div class="tab-content">
          <div class="tab-pane active" id="home"></div>
          <div class="tab-pane" id="profile">
          <div class="row">
            <div class="span4">This is some text that spans4</div>
            <div class="span4">This is some more text that spans 4</div>
           </div>  
          </div>
        </div>
    
        <script>
          $(function () {
            $('#myTab a:last').tab('show');
          })
        </script>
     </div>
    </div>
    

    【讨论】:

    • 查看问题更新。该行位于行流体内部。我想这就是问题
    • 不,我刚刚更新了它:http://jsfiddle.net/rKaaq/1/,它仍然可以正常工作
    • 第一个 span4 中文本的开头是 'hidden' 's is some text that spans4' 而不是 'this is some text that spans4' 我的问题。
    • 呃,什么?我不明白你想说什么。您希望第一个 span4 中没有文本但仍然 span4?如果是这种情况,那么只需将其删除并让一个 div 执行此操作:&lt;div class="span4 offset4"&gt;whatever text you want here&lt;/div&gt;
    • 您必须在保存之前点击更新,您只是将链接粘贴到我之前的小提琴中。但我明白你的意思,看起来 .row 的左边距为 -20px;如果你在你的 css 文件中覆盖它 margin-left: 0;它应该可以解决您的问题。
    猜你喜欢
    • 2014-06-29
    • 1970-01-01
    • 2015-04-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-05-06
    • 2018-11-11
    • 2023-03-31
    相关资源
    最近更新 更多