bootstrap網格，文字相距太遠

我想通過堆疊嵌套網格使視口爲xs時響應網頁。它通過堆疊這兩個網格來工作在xs中，但是當在sm和更大的視圖中時，那些網格中的文本與對方之間的距離太遠，我得在這裏做錯了什麼，並且掙扎了好幾個小時，請大家幫忙，非常感謝！信譽太低，無法直接發佈圖片，請參閱圖片上傳鏈接。bootstrap網格，文字相距太遠

http://i68.tinypic.com/ru1dvm.png

http://i67.tinypic.com/157iqli.jpg

 <div class="row row-content"> 

      <div> 
       <div class="row"> 
        <div class="col-xs-12 col-sm-3"> 
         <h3>Alberto Somayya</h3> 
        </div> 
        <div class="col-xs-12 col-sm-3"> 
         <h3><small>Executive Chef</small></h3> 
        </div> 
       </div> 
       <div> 
        <p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world.!</em></p> 
       </div> 
      </div>

來源

2015-12-17 Leorczhu

什麼是引導版本？ 3不支持嵌套網格。 – atilkan

我想你會就這個問題與你想達到什麼樣的錯誤的方式。你想要的名字和職業頭銜既H3所以嘗試只是讓跨度類標題：

<div class="row"> 
    <div class="col-xs-12"> 
    <h3>Alberto Somayya <span class="split-text"><small>Executive Chef</small></span></h3> 
<p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world.!</p> 
     </div> 
     </div>

，然後使用媒體查詢，以便文本從內嵌阻止去創建一個突破點：

.split-text {display:block;} 
/* Small devices (tablets, 768px and up) */ 
@media (min-width:768px) { 
.split-text{display:inline;} 
}

這很簡單。這裏有一個小提琴在工作中顯示它http://jsfiddle.net/czc7x7w8/8/

來源

2015-12-18 04:16:57

尚未了解媒體查詢。它似乎在那個小提琴頁面上工作。稍後將嘗試將其納入該項目。非常讚賞傑克！ – Leorczhu

可能導致此問題的第一個問題是您的列數太少，在sm及以上。對於xs，每行都有完整的12行，這是Bootstrap網格系統的基本規則。

嘗試將col-sm-的值從3更改爲6，或者在任一側創建一個空列，並使其填充整行。

每行應該是12總計。你可以回顧一下，但你仍然應該把列數與12相關聯（使用col-sm-12和在同一個.row中的兩個col-sm-6是好的，因爲這兩個6並排，填充那12）

來源

2015-12-18 05:56:24 ProDexorite

謝謝，我知道每排有12列。我試圖完成的目標是將名稱疊加在標題上方，而不會中斷在sm和up中查看時的原始設置（標題緊挨名稱旁邊的名稱，而不是間隔太遠）。Jake的解決方案對此非常適用物。感謝您的幫助！ – Leorczhu

bootstrap網格，文字相距太遠

回答

相關問題