Question

我有HTML块：

<div class="class-journal-mobile-navigation">
<div class="col-xs-4"><div class="block"></div></div>
<div class="col-xs-4"><div class="block"></div></div>
<div class="col-xs-4"><div class="block"></div></div>
</div>

如何将div块.block居于父.col-xs-4内？

Answer 1

添加以下CSS：

.col-xs-4{
  text-align: center;
}

.block{
  display: inline-block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="class-journal-mobile-navigation">
  <div class="col-xs-4">
    <div class="block">A</div>
  </div>
  <div class="col-xs-4">
    <div class="block">B</div>
  </div>
  <div class="col-xs-4">
    <div class="block">C</div>
  </div>
</div>

Answer 2

如果您要对齐div .block的内容，则可以使用此

.block {
  text-align:center;
}

Answer 3

您使用的是哪个版本的Bootstrap？可能需要修改，但目前仅假定版本4。

引导网格应具有父类row。

<div class="row class-journal-mobile-navigation">
  <div class="col-xs-4">
    <div class="block"></div>
  </div>
  <div class="col-xs-4">
    <div class="block"></div>
  </div>
  <div class="col-xs-4">
    <div class="block"></div>
  </div>
</div>

对于快速CSS，最好将其更具体地定义为您定义的.class-journal-mobile-navigation并作为.col-xs-4的子代。

.class-journal-mobile-navigation .col-xs-4 {
  text-align: center;
}
.class-journal-mobile-navigation .col-xs-4 .block {
  display: inline-block;
}

这里可以使用许多有用的CSS类。为了帮助专门为XS断点定义布局，并且不需要其他CSS。这是一些其中的类可能如何应用于您的示例的示例。

<div class="row class-journal-mobile-navigation">
  <div class="col-xs-4 text-center text-sm-left">
    <div class="d-inline-block d-sm-block"></div>
  </div>
  <div class="col-xs-4 text-center text-sm-left">
    <div class="d-inline-block d-sm-block"></div>
  </div>
  <div class="col-xs-4 text-center text-sm-left">
    <div class="d-inline-block d-sm-block"></div>
  </div>
</div>

Flex类是另一个选择！

<div class="col-xs-4 d-flex justify-content-center">

Answer 4

您是否尝试过将text-center添加到col类？或者，您可以尝试将justify-content-center类添加到行类。

如何将col-xs-4内容居中？

4 个答案: