无任何填充或空格的两列引导布局

Question

这类似于我试图实现的布局：

​

​

我现在拥有的代码

 <div class="row ">
        <div class="col-lg-6 row-eq-height push-right">
            <img src="1.jpg" class="img-responsive">
        </div>

        <div class="col-lg-6 row-eq-height">
            <div class="eq-row-text ">
                 <p class="row-text">Text description for image </p>
            </div>
        </div>
    </div>

    <div class="row ">
         <div class="col-lg-6 row-eq-height ">
            <div class="eq-row-text ">
                 <p class="row-text"> Text description for the image </p>
            </div>
        </div>

        <div class="col-lg-6 row-eq-height">
            <img src="1.jpg" class="img-responsive">
        </div>
    </div>

我试过使用CSS类"no-padding“，也试着调整页边距。当我应用0填充时，第一个图像的左侧接触到浏览器的边缘(这是所需的)，但是另一个边缘(图像的右侧)仍然有一些空白空间。

我如何摆脱那些空白的空间，得到像参考布局一样的结果？

Answer 1

可能是<p>填充/边际有问题，也可能是<img>填充/边际有问题。但是，这似乎是行中元素大小的问题。

然而，我似乎在我的PEN HERE中解决了这个问题

我在row类中添加了一个height: ***，当您使用row-eq-height引导程序类时，可能需要这样做才能得到预期的结果。

HTML

<div class="row ">
    <div class="col-lg-6  row-eq-height push-right">
        <img src="1.jpg" class="img-responsive">
    </div>
    <div class="col-lg-6 row-eq-height">
        <div class="eq-row-text ">
            <p class="row-text">Text description for image </p>
        </div>
    </div>
</div>

<div class="row">
     <div class="col-lg-6 row-eq-height ">
          <div class="eq-row-text ">
               <p class="row-text"> Text description for the image </p>
          </div>
      </div>
     <div class="col-lg-6 row-eq-height">
          <img src="1.jpg" class="img-responsive">
     </div>
</div>

CSS

p{
    margin: 0;
    padding: 0;
}
img{
    margin: 0;
    padding: 0;
}
.row {
    margin: 0;
    padding: 0;
    height:60px;
    background-color: #eee
}

Answer 2

.col-md-6{
    padding-right: 0px;
    padding-left: 0px;
}

Answer 3

如果使用LESS/SASS源:将变量文件中的@grid-gutter-width更改为0