ブートストラップcol-sm-6画像リサイズdiv

Question

col-sm-6を使用しているとき、画像とボックステキストを揃えることができません。私はそれが画像やマージン/パディングなどの問題がある場合はわからない

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要素の幅を変化さ：

<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それが最も可能性が高い。このコードcol-sm-6

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