Question

我正在尝试在Bootstrap模式中添加一组列。以下工作正常（没有列）：

<div class="container">
    <div id="updateModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-type="strength">
        <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <h3 id="myModalLabel" class="text-center">Invoice <span class="itemID"></span></h3>
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <div class="tabbable">
                        <ul class="nav nav-tabs" style="display: none">
                            <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
                            <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab1">
                                <h3>Test</h3>
                                <h3>Test</h3>
                                <h3>Test</h3>
                                <h3>Test</h3>
                                <h3>Test</h3>
                            </div>
                            <div class="tab-pane" id="tab2">
                                <p>Data 2.</p>
                            </div>
                         </div>
                     </div>
                  </div>
               </div>
           </div>
      </div>
</div>

但是，向第一个标签添加列会抛弃格式，以便底部模式不会拉伸以覆盖内容。

<div class="tab-pane active" id="tab1">
    <div class="col-md-7">
        <h3>Test</h3>
        <h3>Test</h3>
        <h3>Test</h3>
        <h3>Test</h3>
        <h3>Test</h3>
    </div>
    <div class="col-md-5">
        <h3>Test</h3>
        <h3>Test</h3>
        <h3>Test</h3>
        <h3>Test</h3>
        <h3>Test</h3>
    </div>
</div>

我试图在浏览器中找到高度决定因素，但该属性似乎是隐含的。这看起来应该很简单，我做错了什么？

Answer 1

您需要使用整个Bootstrap网格框架，而不仅仅是.col-*-*。因此，请务必指定.container（推荐.container-fluid）和.row

<div class="tab-pane active" id="tab1">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-7">
                <h3>Test</h3>
                <h3>Test</h3>
                <h3>Test</h3>
                <h3>Test</h3>
                <h3>Test</h3>
            </div>

            <div class="col-md-5">
                <h3>Test</h3>
                <h3>Test</h3>
                <h3>Test</h3>
                <h3>Test</h3>
                <h3>Test</h3>
            </div>
        </div>
    </div>
</div>

包括Bootstrap模式选项卡中的列

1 个答案: