Question

我想知道如何仅使用Bootstrap（（我不确定我是否可以在这里添加图像，所以，这是代表我需要它们的图像......）。

http://i.imgur.com/pZlR63X.png

我已经有了一个代码，后面跟着

       body {
         padding-top: 50px;
         padding-bottom: 50px;
         margin: 0;
       }
       .text {
         background-color: silver;
         margin-top: 50px;
         margin-left: 30px;
         height: 70px;
       }
       .img-right {
         height: 150px;
         float: right;
         padding-top: -30px;
         overflow: auto;
       }
       .img-left {
         height: 150px;
         float: left;
         padding-top: -30px;
         overflow: auto;
       }
       .box {
         width: 45%;
         display: inline-flex;
       }

<div class="container">
  <div class="row">
    <div class="container pull-left" style="overflow: auto">
      <img src="http://placehold.it/600x400" class="img-left">

      <div class="container-fluid box">
        <p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </div>
    </div>


    <div class="container" style="overflow: auto">
      <img src="http://placehold.it/600x400" class="img-right">

      <div class="container-fluid box">
        <p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </div>
    </div>
  </div>


</div>

但是，正如大家都能看到的，甚至不是我想要的......有人可以帮助我吗？我不确定它是否易于注意，但每个“块”之间有一个小空间......是的，它的意图是这样......它将是容器内一排内的2个容器。 / p>

左边的几乎是我想要的，但是右边的那个甚至不是很远=）

干杯=）

Answer 1

这是一个让你入门的片段：

<div class="container">
  <div class="row">
    <div class="col-sm-6 text-center">
      <div class="row">
        <div class="col-sm-6">
          <p class="img-text">Text</p>
        </div>
        <div class="col-sm-6">
          <img src="http://placehold.it/150x150">
        </div>
      </div>
    </div>
    <div class="col-sm-6  text-center">
      <div class="row">
        <div class="col-sm-6">
          <img src="http://placehold.it/150x150">
        </div>
        <div class="col-sm-6">
          <p class="img-text">Text</p>
        </div>
      </div>
    </div>
  </div>
</div>

只有这个CSS：

.img-text{
    padding:65px 0;
}

See it in action here

HTH，

-Ted

如何使一个盒子溢出一排？

1 个答案: