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

Question

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

它只是两个 block ，在两个单独的 div 中包含一个图像和一些文本。

在较小的尺寸下，图像和文本位于彼此之上。

每个 block 还有一个三 Angular 形，应该位于 block 底部的中间。

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

在更大的尺寸下， block 没有背景颜色，三 Angular 形移到顶部。

<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