Question

我想把两个面板排成一行。

我目前有一个面板（12个宽）在上面，我希望两个面板在它下面彼此相邻位置为6宽）但是第二个面板不会在第一个面板旁边排列：

HTML

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

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

将面板放在一起

3 个答案: