將面板彼此放在一起

我想將兩個面板並排放在一起。將面板彼此放在一起

我現在有一個板（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>

我試圖浮動左側的面板，但是這沒有任何影響，任何幫助將是巨大的。由於

來源

2016-12-24 Marcus Cassidy

不要再把它們變成新的'div.row'嗎？ – Jhecht

您只需要使用一個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>

來源

2016-12-24 00:23:05 Banzay

你不需要作出新的行爲每一塊板，而你並不需要一個新的容器要麼。

此外，如果您的目標是在所有屏幕尺寸上使用這兩列，則需要使用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>

來源

2016-12-24 00:24:05 Jhecht

引導默認情況下，使一排去全寬。

嘗試將兩個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>

來源

2016-12-24 00:25:47

將面板彼此放在一起

回答

相關問題