使用col-sm-6时,我无法对齐图片和文本框。我不确定这是图像或边距/填充等问题。
HTML:
/* css: */
.category {
padding-top: 3rem;
padding-bottom: 3rem;
background-color: #096;
}
.categoryimg {
display: block;
height: 487px;
max-width: 100%;
}
.categorytext {
padding-top: 12%;
font-family: Avenir;
color: #0670EB;
font-weight: bold;
background-color: white;
width: 50%;
height: 487px;
float: right;
}
.categorytext1 {
padding-top: 12%;
font-family: Avenir;
color: #0670EB;
font-weight: bold;
background-color: white;
width: 50%;
height: 487px;
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个文本,并将其作为一个表格,每个盒子之间都有填充。我不知道如何解决这个问题。
答案 0 :(得分:2)
使用此代码:
<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>
答案 1 :(得分:0)
.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;
}