Bootstrap是否像簡單的網格對齊兩個內容？

我一直在爲此工作了大約一個星期。我使用bootstrap將兩個類中的兩個類對齊，並在內容下面創建另一個單獨的類。當我預覽網頁時，單獨的類將與兩個類對齊，而不是單獨的類位於2列網格之下。如何將單獨的類放置在兩列引導程序網格下？下面是結果的圖片，以及使用的代碼。由於Bootstrap是否像簡單的網格對齊兩個內容？

<div class="prod_section"> 
    <div class="border col-md-6"> 
     <img src="help.jpg" class="word" alt="h"> 
     <h2 class="header">SHIRT</h2> 
    </div> 
    <div class="border col-md-6 "> 
     <img src="img/help_two.jpg" alt="" class="word"> 
     <h2 class="header"> URBAN SHIRT</h2> 
    </div> 
</div> 
<div class="seperate">Is BOOTSTRAP suppose to appear like this?</div> 



.prod_section{ 
    margin:auto; 
    width:1300px; 
    margin-top:600px; 
    margin-bottom: 600px; 
} 

.word{ 
    max-width:90%; 
    /*box-shadow: 10px 10px 20px #bababa;*/ 
} 

h2{ 
    font-family: 'Montserrat'; 
    font-weight:700; 
} 
.header{ 
    padding-top:20px; 
} 
body{ 
    background:white; 
}

來源

2017-06-18 ricky

儘量把那些col-md-6到.row格狀：

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

來源

2017-06-18 22:19:46 DariusD

在引導，你需要開始您的div過像這樣

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6" id="one"><img src="http://lorempixel.com/400/200" class="word" alt="h">PIC A</div> 
    <div class="col-md-6" id="two"><img src="http://lorempixel.com/400/200" alt="" class="word">Pic B</div> 
    </div> 

    <div class="row"> 
    <div class=" col-md-6 seperate"><img src="http://lorempixel.com/400/200">Is BOOTSTRAP suppose to appear like this? Div 3</div> 
    </div> 
</div>

要充分利用您需要的bootstraps網格系統在<div class="container">然後<div class="row">行中的每一行都負責確保其中的所有內容都對齊在同一「行」中，只要網格不超過12列。最後，你需要給每個div一個大小，他們會佔用多少列。 1 - 12列。這裏我們有3個div，每個佔用6列，每個<div class="column-md-6">。前兩個<div> s在裏面有自己的排，總共佔據12列，而對於最後的<div>我們走出排，但仍然在<div class="container"> div內並創建一個新行<div class="row">。那麼它只是創建你的div並給他們列寬的問題。這並不是完整的bootstrap的簡介，但它是網格系統工作原理的簡單概述。繼續閱讀網站bootstrap上的更多內容，bootstrap 4尚未發佈，但alpha版本可以安全使用，至今我個人尚未遇到任何問題。
https://v4-alpha.getbootstrap.com/layout/grid/

來源

2017-06-18 22:42:13

Bootstrap是否像簡單的網格對齊兩個內容？

回答

相關問題