Question

我正在尝试使用col-sm-4函数对三个元素进行对齐，但无论出于什么原因我都错过了它无法正常工作。无论我做什么，物品仍然左右对齐显示。图像大小都相同。

以下是代码段：

<section class="container">
      <div class="row">
        <figure class="col-sm-4">
          <p text-align: center>PLAY</p>
          <img src="img/m1.jpg"/>
        </figure>
        <figure class="col-sm-4">
          <p text-align: center>LEARN</p>
          <img src="img/m2.jpg"/>
        </figure>
        <figure class="col-sm-4">
          <p text-align: center>HELP</p>
          <img src="img/m3.jpg"/>
        </figure>
      </div>
    </section>

和css：

section .row img {
  margin: 0 0 30px;
  width: 100%;
  border: 4px dotted #000;
  clear: none;
  }

这让我很困惑，因为我使用相同的技术查看了其他网站，我无法发现错误。感谢。

Answer 1

你想这样吗？

section .row img {

  border: 4px dotted #000;
  clear: none;
  display:inline-block;
  }
  .col-sm-4
  {
    display:inline-block;

  }

DEMO HERE

Answer 2

经过一些调整后，我设法让您的代码正常工作（有关详细信息，请参阅代码段中的注释）

get(0)

/* made the boxes use flexible boxes to lay themselves out in a row */

.flexgrid {
  display: flex;
  flex-direction: row;
  align-items: center;
 
}
/* fixed css because there were no 'row' elemeents */

/* added the > operand */

section > .col > img {
  margin: 30px 0 30px;
  width: 50%;
  border: 4px dotted #000;
  clear: none;
  align: center;
}
.col > div, .col > img {
  content-align: center
}

Answer 3

使用未在col- - 格式中指定的屏幕尺寸似乎是一个问题。我已经添加col-lg-4 col-md-4 col-sm-4 col-xs-4作为支持所有屏幕尺寸的类，现在它已经完美运行了。

＆＃13;

section .row img {
  margin: 0 0 30px;
  width: 100%;
  border: 4px dotted #000;
  clear: none;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<section class="container">
      <div class="row">
        <figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <p text-align: center>PLAY</p>
          <img src="img/m1.jpg"/>
        </figure>
        <figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <p text-align: center>LEARN</p>
          <img src="img/m2.jpg"/>
        </figure>
        <figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <p text-align: center>HELP</p>
          <img src="img/m3.jpg"/>
        </figure>
      </div>
</section>

＆＃13;

Answer 4

您只需要为text-center使用预定义的引导类<div class=row...：

section .row img {
  margin: 0 0 30px;
  width: 100%;
  border: 4px dotted #000;
  clear: none;  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="container">
      <div class="row text-center">
        <figure class="col-xs-4">
          <p text-align: center>PLAY</p>
          <img src="img/m1.jpg"/>
        </figure>
        <figure class="col-xs-4">
          <p text-align: center>LEARN</p>
          <img src="img/m2.jpg"/>
        </figure>
        <figure class="col-xs-4">
          <p text-align: center>HELP</p>
          <img src="img/m3.jpg"/>
        </figure>
      </div>
    </section>

Bootstrap - 使用col-sm-4命令对齐数字

4 个答案: