bootstrap col-sm-6圖像調整大小div

Question

使用col-sm-6時，我無法對齊圖片和box-text。我不知道這是否是圖像或保證金/填充等問題

HTML：

/* css: */ 
 

 
.category { 
 
\t padding-top: 3rem; 
 
\t padding-bottom: 3rem; 
 
\t background-color: #096; 
 
} 
 
.categoryimg { 
 
\t display: block; 
 
\t height: 487px; 
 
\t max-width: 100%; 
 
} 
 
.categorytext { 
 
\t padding-top: 12%; 
 
\t font-family: Avenir; 
 
\t color: #0670EB; 
 
\t font-weight: bold; 
 
\t background-color: white; 
 
\t width: 50%; 
 
\t height: 487px; 
 
\t float: right; 
 
} 
 
.categorytext1 { 
 
\t padding-top: 12%; 
 
\t font-family: Avenir; 
 
\t color: #0670EB; 
 
\t font-weight: bold; 
 
\t background-color: white; 
 
\t width: 50%; 
 
\t height: 487px; 
 
\t float: left; 
 
}

<div class="container-fluid"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-6 categorytext1"> 
 
     <h2>LANGUAGE</h2> 
 
     <p class="lead">Nibook is a platform where foreigners can change their frame time into money by crafting beautiful services and share them with the locals within in-person or online experiences.</p> 
 
     </div> 
 
     <div class="col-sm-6"> <img src="img/language.png" class="categoryimg" alt="Generic placeholder image"> </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>

下一個畫面是什麼，我儘量做到。我嘗試將1個img和1個文本框逐行放入，並將其作爲每個盒子之間填充的表格。我不知道如何解決這個問題。

Answer 1

使用此代碼：

<div class="container-fluid"> 
    <div class="container"> 
    <div class="row"> 
    <div class="col-sm-6 pad0"> 
    <img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" class="categoryimg" alt="Generic placeholder image"> 
    </div> 
    <div class="col-sm-6 pad0"> 
    <div class="categorytext1"> 
     <h2>LANGUAGE</h2> 
     <p class="lead">Nibook is a platform where foreigners can change their frame time into money by crafting beautiful services and share them with the locals within in-person or online experiences.</p> 
    </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="row"> 
    <div class="col-sm-6 col-sm-push-6 pad0"> 
    <img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" class="categoryimg" alt="Generic placeholder image"> 
    </div> 
    <div class="col-sm-6 col-sm-pull-6 pad0"> 
    <div class="categorytext1"> 
     <h2>LANGUAGE</h2> 
     <p class="lead">Nibook is a platform where foreigners can change their frame time into money by crafting beautiful services and share them with the locals within in-person or online experiences.</p> 
    </div> 
    </div> 
    </div> 
    </div> 
</div> 
<style> 
body{ 
    background: #f5f5f5; 
} 
.pad0{ 
    padding: 5px; 
    margin-bottom: 5px; 
} 

.category { 
    padding-top: 3rem; 
    padding-bottom: 3rem; 
    background-color: #096; 
} 

.categoryimg { 
    display:block; 
    height:487px; 
    max-width:100%; 

} 

.categorytext1 { 
padding: 0 15px; 
padding-top:12%; 
font-family: Avenir; 
color:#0670EB; 
font-weight:bold; 
background-color:white; 
height:487px; 
float:left; 
} 
</style> 

Answer 2

.categorytext1是改變div的寬度，即最有可能與引導風格搞亂爲col-sm-6

.categorytext1 { 
    padding-top:12%; 
    font-family: Avenir; 
    color:#0670EB; 
    font-weight:bold; 
    background-color:white; 
    *****width:50%;***** 
    height:487px; 
    float:left; 
}