将面板并排放置答案

【问题标题】：Placing panels alongside each other将面板并排放置
【发布时间】：2017-05-09 14:47:26
【问题描述】：

我想将两个面板并排排列。

我目前有一个面板（12 宽）在上面，我希望两个面板在其下方并排放置 6 宽）但是第二个面板不会与第一个面板并排：

HTML

.panel-heading {
  background: #666;
  color: #FF7800;
  font-family: sans-serif;
}
.panel-body {
  background: #999;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">
        Panel Conent
      </div>
    </div>
  </div>
</div>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">
        Panel Conent
      </div>
    </div>
  </div>
</div>
</div>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">
        Panel Conent
      </div>
    </div>
  </div>
</div>
</div>

我尝试将面板向左浮动，但这没有效果，任何帮助都会很棒。谢谢

【问题讨论】：

那么停止将它们变成新的div.row 吗？

标签： css html panel

【解决方案1】：

您只需要使用一个container

<div class="container">
    <div class="row">
        <div class="col-sm-12">
                <div class="panel-heading">Panel Heading</div>
                <div class="panel-body">
                Panel Conent
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="panel-heading">Panel Heading</div>
            <div class="panel-body">
                    Panel Conent
            </div>
        </div>
        <div class="col-sm-6">
            <div class="panel-heading">Panel Heading</div>
                <div class="panel-body">
                Panel Conent
            </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

您不需要为每个面板创建新行，也不需要新容器。

另外，如果您的目标是在所有个屏幕尺寸上使用两列，您需要使用col-xs-* 类。

.panel-heading {
  background: #666;
  color: #FF7800;
  font-family: sans-serif;
}
.panel-body {
  background: #999;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">
        Panel Conent
      </div>
    </div>
    <div class="col-xs-6">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">
        Panel Conent
      </div>
    </div>
    <div class="col-xs-6">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">
        Panel Conent
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

默认情况下，Bootstrap 使一行全宽。

尝试将两个 6 移到同一行，这样它们应该可以并排放置。

 <div class="container"> 
   <div class="row">
 <div class="col-sm-6"> 
<div class="panel-heading">Panel Heading</div>
 <div class="panel-body"> Panel Conent </div> 
</div>
<div class="col-sm-6"> 
<div class="panel-heading">Panel Heading</div> 
<div class="panel-body"> Panel Conent </div>
 </div> 
</div>
</div>

【讨论】：