在Bootstrap中将单列分成两部分 [英] Split single column into two in Bootstrap

问题描述

我有一个持有4件物品的面板体。现在他们被堆叠在一起，所以1列4行。我希望它是2列，每列有2行。

I have a panel body that is holding 4 items. Right now they are stacked right on top of each other, so 1 columns with 4 rows. I would like for it to be 2 columns with 2 rows on each column.

我似乎无法找到一种方法来做到这一点。

I can not seem to figure out a way to do this.

标记：

Markup:

<div class="col-lg-3">
        <div class="menu-item blue">
            <div class="panel-heading text-center">
                <a>
                    <%--<i class="glyphicon glyphicon-signal"></i>--%>
                    <p>My title</p>
                </a>
            </div>
            <hr />
            <div class="panel-body">
                <p><i class="glyphicon glyphicon-credit-card"></i><a href="http://www.google.com">Test 1</a></p>
                <p><i class="glyphicon glyphicon-briefcase"></i><a href="http://www.google.com">Test 2</a></p>
                <p><i class="glyphicon glyphicon-home"></i><a href="http://www.google.com">Test 3</a></p>
                <p><i class="glyphicon glyphicon-user"></i><a href="http://www.google.com">Test 4</a></p>
            </div>
        </div>
    </div>

推荐答案

a href =http://getbootstrap.com/examples/grid/ =nofollow> col-xs-6 相当于 width：50％

Wrap every two items inside the panel-body within col-xs-6 which is equivalent to width: 50%

col-xs - * 用于从额外的小设备启动网格。您可以用 col-sm\md\lg - *

col-xs-* is used to start the grid from extra small devices. You can replace it with col-sm\md\lg-*

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="col-lg-3">
  <div class="menu-item blue">
    <div class="panel-heading text-center">
      <a>
        <%--<i class="glyphicon glyphicon-signal"></i>--%>
          <p>My title</p>
      </a>
    </div>
    <hr />
    <div class="panel-body">
      <div class="col-xs-6">
        <p><i class="glyphicon glyphicon-credit-card"></i><a href="http://www.google.com">Test 1</a>
        </p>
        <p><i class="glyphicon glyphicon-briefcase"></i><a href="http://www.google.com">Test 2</a>
        </p>
      </div>
      <div class="col-xs-6">
        <p><i class="glyphicon glyphicon-home"></i><a href="http://www.google.com">Test 3</a>
        </p>
        <p><i class="glyphicon glyphicon-user"></i><a href="http://www.google.com">Test 4</a>
        </p>
      </div>
    </div>
  </div>
</div>

这篇关于在Bootstrap中将单列分成两部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！