Question

我这里有一个jsfiddle - http://jsfiddle.net/7psczxog/5/

它只包含一个图像和两个不同div中的一些文本。

尺寸较小时，图像和文字会相互叠加。

每个区块也有一个三角形，应该位于区块底部的中间位置。

我的问题是当图像位于文本顶部时，块只能以较小的尺寸工作。

在较大的尺寸下，块没有背景颜色，三角形移动到顶部。

<div class="container">

<div class="row">

    <div class="testimonialBlock triangle-section clearfix block0">
        <div class="col-sm-4">
            <img src="http://placehold.it/350x150" alt="image" class="img-responsive"/>
        </div>
        <div class="col-sm-8">
            <h4>Trader Testimonial 1</h4>
            <h5>Trader Testimonial By 1</h5>
            <p>Trader Testimonial Text 1</p>
        </div>  
    </div><!--testimonialBlock-->
</div>


<div class="row">

    <div class="testimonialBlock triangle-section clearfix block1">
        <div class="col-sm-4">
            <img src="http://placehold.it/350x150" alt="image" class="img-responsive"/>
        </div>
        <div class="col-sm-8">
            <h4>Trader Testimonial 2</h4>
            <h5>Trader Testimonial By 2</h5>
            <p>Trader Testimonial Text 2</p>
        </div>  
    </div><!--testimonialBlock-->
</div>

Answer 1

这是你在找什么？

http://jsfiddle.net/prsne4a7/

HTML：

<div class="container">

<div class="triangle-section-row row">
    <div class="testimonialBlock triangle-section block0">
        <div class="col-xs-4">
            <img src="http://placehold.it/350x150" alt="image" class="img-responsive"/>
        </div>
        <div class="col-xs-8">
            <h4>Trader Testimonial 1</h4>
            <h5>Trader Testimonial By 1</h5>
            <p>Trader Testimonial Text 1</p>
        </div>  
    </div><!--testimonialBlock-->
</div>

<div class="triangle-section-row row">
    <div class="testimonialBlock triangle-section block1">
        <div class="col-xs-4">
            <img src="http://placehold.it/350x150" alt="image" class="img-responsive"/>
        </div>
        <div class="col-xs-8">
            <h4>Trader Testimonial 2</h4>
            <h5>Trader Testimonial By 2</h5>
            <p>Trader Testimonial Text 2</p>
        </div>  
    </div><!--testimonialBlock-->
</div>

</div>

CSS：

.triangle-section-row{
    background: red;    
    margin: 0 0 50px 0;
    position: relative;
}
.triangle-section:after{
  border-style: solid;
  border-width: 20px 20px 0 20px;
  border-color: red transparent transparent transparent;
  bottom: -20px;
  left: 50%;
  content: "";
  height: 0;
  margin-left:-20px;
  width: 0;
  position: absolute;
}

我刚刚将position: relative发送到.triangle-section的父级，并使用col-xs-*代替col-sm-*来保持所有客户端宽度的列一致。 col-sm-*仅在客户区宽度大于768px时强制执行列。

有关响应式网格的详细信息，请参阅Bootstrap网格文档：

http://getbootstrap.com/css/#grid-options

Bootstrap，布局仅适用于小屏幕尺寸

1 个答案: