Question

我有一个面板正文，里面有4个项目。现在它们正好堆叠在一起，所以1列有4行。我希望它是2列，每列有2行。

我似乎无法想办法做到这一点。

标记：

<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>

Answer 1

将col-xs-6内的每两个项目包裹在http://rvm.io/workflow/scripting内，相当于width: 50%

col-xs-*用于从超小型设备启动网格。您可以将其替换为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>

Answer 2

这应该有效：

    <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-sm-4">
                <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-sm-4">
                <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>

Answer 3

使用行类：

  <div class="row">
       //cols
  </div>
  <div class="row">
       //cols
  </div>

Answer 4

您可以使用bootstrap's grid system来执行此操作：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="container">
                    <div class="row">
                        <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>
        </div>
    </div>

＆＃13;

在Bootstrap中将单个列拆分为两个

4 个答案: