Question

我想在引导选项卡中插入2列。选项卡的引导代码取自here。那么，我如何在“主页”选项卡中放置2列？

我试过了：

<div class="tab-content col-sm-6">
    <div role="tabpanel" class="tab-pane active col-sm-6" style="width: 200px" id="home">
                Bla bla bla Bla bla bla Bla bla bla Bla bla bla
        <div class="row">
            <div class="col-sm-6">Column 2</div>
        </div>
    </div> 
    <!-- The other tabs (Profile, Messages, Settings) -->
</div>

Answer 1

在同一row

中提供两列

 <div class="tab-content">
   <div role="tabpanel" class="tab-pane active" id="home">
      <div class="row">
          <div class="col-lg-6">Column 1</div>
          <div class="col-lg-6">Column 2</div>
       </div>
   </div>

   ... other tabs
 </div

Answer 2

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
	  <div class="row">
        <div class="col tab-content ">HOME </div>
        <div class="col">COLUMN 2</div>
    </div>
</div>
<br>

请看这里：https://v4-alpha.getbootstrap.com/examples/grid/

在引导选项卡中插入列

2 个答案: