在一个容器内的Bootstrap中使用图像的单个全宽列的css的最佳实践?

时间:2017-11-01 09:38:25

标签: css twitter-bootstrap

这种带有图像的全宽列的最佳做法是什么(左列-col1)。我需要它把它粘在左边缘。第2栏必须有自助排水沟。

enter image description here

1 个答案:

答案 0 :(得分:1)

试试这个:

.padded-left {
  padding-left: 0;
}
.content {
  padding: 5% 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-6 padded-left">
      <img class="img-responsive" src="https://images-na.ssl-images-amazon.com/images/I/51Le800MwaL.jpg"/>
    </div>
    <div class="col-xs-6  col-sm-6">
     <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</div>