Bootstrap col-sm-6 图像调整 div答案

【问题标题】：Bootstrap col-sm-6 Image resize divBootstrap col-sm-6 图像调整 div
【发布时间】：2017-01-09 01:03:48
【问题描述】：

当使用 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 个文本框，并将其作为一个表格，每个框之间都有填充。我不知道如何解决这个问题。

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

.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;
}

【讨论】：

我删除了 .categorytext 和 .categorytext1 的宽度，没有任何变化
container 类是否有任何样式？

【解决方案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>

【讨论】：