Bootstrap - 在列之間提供小間距

我試圖調整Bootstrap上的設計佈局，內容中的兩列間距很小，我無法通過直接列間距實現（因爲間距太大）。因此，我嘗試將所有內容都包裝成行，並在主列中添加子列。下面的代碼，它更清晰：Bootstrap - 在列之間提供小間距

<div class="container"> 
    <div class="col-md-12 banner"></div> 

    <div class="row"> 
     <div class="col-md-8"> 
      <div class="col-md-12 leftSide"> 

      </div> 
      <div class="col-md-12 leftSide"> 

      </div> 
     </div> 

     <div class="col-md-4 rightSide"> 
      <div class="col-md-12"> 

      </div> 
     </div> 
    </div> 

</div>

現在的間距似乎不錯，但正如我在一排（我覺得）它包裹，右側面板中溢出更多的則旗幟。

可以看出在小提琴更加清晰：http://www.bootply.com/gMBrLvaK5C

的問題是「rightSide」面板。

如何保持'left side'和'right side'之間的間距，並修復右列溢出（因爲如果我嘗試用列實現間距，則間距太大）？或者什麼是實現這個目標的最佳方式？

來源

2017-01-17 senty

這是我個人的解決方案，而不是添加在列類，創建一列內一個div，那麼你可以把一個div.banner和div.block像我的例子：

http://www.bootply.com/PEIiDnp9VD

<div class="container"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <div class="banner"></div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-8"> 
     <div class="block"></div> 
    </div> 
    <div class="col-md-4"> 
     <div class="block"></div> 
    </div> 
    </div> 
</div>

如果您希望列之間的空間更少，您可以簡單地通過在左右列更改填充的列上添加類來覆蓋Bootstrap col-md-*類。

來源

2017-01-17 16:51:20

左側現在關閉。：S我不想改變橫幅的大小（這會導致左側的大小也變大）。這不是我想要的。我想要做的是讓右側面板的右側變小。 – senty

是啊...如果刪除填充左從左側正常工作...我會再試 –

謝謝。如果有效，我會接受你的回答 – senty

首先，你需要遵循正確的行和列的包裝。如果你想保持一致性，你需要確保所有的列都被包裝成一行。

<div class="row"> 
    <div class="col-md-8 leftSide"> 
     <div class="row"> 
      <div class="col-md-12"> 

      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 

      </div> 
     </div> 
    </div> 

    <div class="col-md-4 rightSide"> 
     <div class="row"> 
      <div class="col-md-12"> 

      </div> 
     </div> 
    </div> 
</div>

然後將自定義邊距和樣式應用於列內的元素，而不是列本身。

http://www.bootply.com/g6eLHRd1tH

來源

2017-01-17 17:00:32

Bootstrap - 在列之間提供小間距

回答

相關問題