如何使用引导程序在中间获取div内容

Question

我连续有3个div，我需要在中心对齐3个div。

<div class="row">
  <div class="center">
    <div class="col-sm-4" id="ph-container"></div>
    <div class="col-sm-4" id="do-container"></div>
    <div class="col-sm-4" id="water-temperature-container"></div>
  </div>
</div>

Answer 1

使用text-center而不是center 。

<div class="row">
  <div class="text-center">
    <div class="col-sm-4 col-sm-offset-1" id="ph-container"></div>
    <div class="col-sm-4" id="do-container"></div>
    <div class="col-sm-4" id="water-temperature-container"></div>
  </div>
</div>

添加偏移量将帮助您改善视图。

Answer 2

<div class="row">
    <div class="col-sm-offset-1 col-sm-3" id="ph-container"></div>
    <div class="col-sm-3" id="do-container"></div>
    <div class="col-sm-3" id="water-temperature-container"></div>
</div>

这会使三个div稍微变窄，并将它们从左侧推入，使其显示在页面的中央。

请记住，通过使div变窄，您的图形可能看起来不正确，因此您需要更正样式以适应新的div大小。

这实际上可以为您提供帮助： Bootstrap 3 1.5列偏移量

Answer 3

cols的总数为12，如果您使用12 cols（4 + 4 + 4 = 12），它将不在中间，因为它们将全部与父块一起使用。 因此，您必须使用更少的cols

<div class="row">
    <div class="col-sm-pull-1 col-sm-3" id="ph-container"></div>
    <div class="col-sm-3" id="do-container"></div>
    <div class="col-sm-3" id="water-temperature-container"></div>
</div>