Question

我有以下代码，其中3列使用col-md-4，问题是当屏幕变小时我想要将所有col-md-4文本右侧和文本左侧置于以文本为中心。我到处搜索但找不到帮助你能帮忙吗？

<div class="container">
  <!-- first row -->
  <div class="row ">
    <div class="col-md-4">
      <div class="counter-item">
        <div>
          <a href="#" data-toggle="tooltip" data-placement="right" title="CodeSchool! Click for more..">
            <img class="certification-image" src="images/codeschool.png">
          </a>
        </div>
      </div>
    </div>

    <div class="col-md-4 text-center">
      <div class="counter-item">
        <div>
          <a href="#" data-toggle="tooltip" data-placement="left" title='Sololearn! Click for more..'>
            <img class="certification-image" src="images/sololearn.jpg" >
          </a>
        </div>
      </div>
    </div>

    <div class="col-md-4 text-right">
      <div class="counter-item">
        <div>
          <a href="#" data-toggle="tooltip" data-placement="left" title="Datacamp! Click for more..">
            <img class="certification-image" src="images/datacamp.jpg">
          </a>
        </div>
      </div>
    </div>
</div>

Answer 1

将它放在最后一个CSS文件的末尾：

@media screen and (min-width: 300px) and (max-width: 767px){

    .col-md-4{
      text-align:center !important;
    }

}

Bootstrap 4处于alpha版本，因此很多东西都无法正常工作。

Answer 2

您可以使用bootstrap 4实现此目的。如果您希望在Bootsrap 3中执行此操作，则必须创建自定义类并将其附加到媒体查询以获得所需结果。我已经为您使用Boostrap 4创建了一个快速的CodePen示例：https://codepen.io/w7sang/pen/xrBNJG

＆＃13;

body {
  margin: 0;
}

＆＃13;

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4 text-center text-sm-left text-md-right">
      A
    </div>
    <div class="col-12 col-sm-6 col-md-4 text-center text-sm-left text-md-right">
      B
    </div>
    <div class="col-12 col-sm-6 col-md-4 text-center text-sm-left text-md-right">
      C
    </div>
  </div>
</div>

＆＃13;

Answer 3

添加媒体屏幕

@media screen (max-width: 767px){

   .col-md-4{
        text-align:center !important;
    }

}

Bootstrap 4在开发模式下发布。为什么很多东西都无法正常工作。

您可以像3

一样使用稳定版本的Bootstrap

需要Bootstrap列帮助

3 个答案: