Bootstrap容器流体,但容器中有一列

时间:2018-02-20 16:16:38

标签: twitter-bootstrap containers

您好我使用引导网格我有一个问题 - 第一部分在容器中有内容但第二部分在容器流体中(右列是img,但左边只是文本)。我希望第二部分中的左列与容器中的其他列位于同一垂直线上。

示例代码:



.second{
margin: 30px 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section>
    <div class="container">
      <div class="row">
        <div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit animi eius, unde quidem expedita, esse saepe modi reiciendis sunt at provident vero, consequatur fugiat ipsa harum cum tenetur eligendi dolore.</div>
        <div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit animi eius, unde quidem expedita, esse saepe modi reiciendis sunt at provident vero, consequatur fugiat ipsa harum cum tenetur eligendi dolore.</div>
      </div>
    </div>
</section>


<section class="second">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed aut laborum obcaecati tempore aperiam doloribus praesentium ratione aliquid sapiente reiciendis ea in iste dolor perspiciatis quasi, architecto repudiandae. Nostrum, autem.
      </div>
      <div class="col-md-6">
        <img src="https://placeimg.com/640/480/any">
      </div>
    </div>
  </div>
</section>
&#13;
&#13;
&#13;

enter image description here

0 个答案:

没有答案