Question

下面的代码显示3列，每列都有一个图像和文本，可以在较小的屏幕上调整大小，最后在智能手机上调整为1列。有两个问题：1 /在最小的屏幕上，图像太大，2 /文本在图像下（如在大屏幕上）但我希望它在图像的一侧（最小屏幕的一半大小））。

我看了很多例子，但我找不到简单的东西......

如何使用Bootstrap轻松实现这一目标？

<div class="container BSC_Angel">
  <div class="row">
    <div class="col-md-12 text-center">
      <div class="col-sm-4 text-center" style="">
        <div>image 1</div>
        <div>text 1</div>
      </div>
      <div class="col-sm-4 text-center" style="">
        <div>image 2</div>
        <div>text 2</div>
      </div>
      <div class="col-sm-4 text-center" style="">
        <div>image 3</div>
        <div>text 3</div>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以使用 CSS Flexbox 。

看一下 Codepen 。

或者查看下面的代码段（ use full screen to view this properly ）：

＆＃13;

.content-holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

/* On Mobiles (screen width <= 767px) */
@media screen and (max-width: 767px) {
  .content-holder {
    flex-direction: row;
  }
  
  .text-div {
    margin-left: 10px;
  }
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container BSC_Angel">
  <div class="row">
    <div class="col-md-12 text-center">

      <div class="col-sm-4 text-center" style="">
        <div class="content-holder">
          <div class="img-div"><img src="http://placehold.it/100x100" alt=""></div>
          <div class="text-div">Text 1</div>
        </div>
      </div>

      <div class="col-sm-4 text-center" style="">
        <div class="content-holder">
          <div class="img-div"><img src="http://placehold.it/100x100" alt=""></div>
          <div class="text-div">Text 2</div>
        </div>
      </div>

      <div class="col-sm-4 text-center" style="">
        <div class="content-holder">
          <div class="img-div"><img src="http://placehold.it/100x100" alt=""></div>
          <div class="text-div">Text 3</div>
        </div>
      </div>

    </div>
  </div>
</div>

＆＃13;

希望这有帮助！

引导3列与图像＆amp;文字敏感

1 个答案: