Question

我需要你的帮助我试图在每个列中创建一个页面，其中包含4个相等宽度的引导列和一个内容（让我们说一个矩形）。但是，我似乎找不到将每个矩形放置在列中心的方法。我需要你的帮助才能找到一种方法来集中定位矩形，而不会破坏页面的响应式布局。

    <div class="container-fluid">

    <div class="border row">

    <div class="border col-md-3"><div  class="rectangles"></div></div>

    <div class="border col-md-3"><div  class="rectangles"></div></div>

    <div class="border col-md-3"><div  class="rectangles"></div></div>

    <div class="border col-md-3"><div  class="rectangles"></div></div>

    </div>
    </div>

Answer 1

这是你在找什么？查看整页。

＆＃13;

.rectangles1 {
  width: 100px;
  height: 100px;
  background: purple;
  text-align: center;
  margin: auto;
}

.rectangles2 {
  width: 100px;
  height: 100px;
  background: blue;
  text-align: center;
  margin: auto;
}

.rectangles3 {
  width: 100px;
  height: 100px;
  background: green;
  text-align: center;
  margin: auto;
}

.rectangles4 {
  width: 100px;
  height: 100px;
  background: gray;
  text-align: center;
  margin: auto;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">

  <div class="border row">

    <div class="border col-sm-3">
      <div class="rectangles1"></div>
    </div>

    <div class="border col-sm-3">
      <div class="rectangles2"></div>
    </div>

    <div class="border col-sm-3">
      <div class="rectangles3"></div>
    </div>

    <div class="border col-sm-3">
      <div class="rectangles4"></div>
    </div>

  </div>
</div>

＆＃13;

Answer 2

您可以尝试使用flex-box垂直对齐方法。并且你想将它添加到你希望矩形居中的父div（I.E。你为你的矩阵制作的col）

.aligner{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}

需要帮助将div放在bootstrap列中

2 个答案: