Question

我在bootstrap 4中练习，我不知道响应式设计违反了什么规则。如果有人用最佳实践来帮助我实现图像，我会非常感激。我的想法是学习。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<body>
  <div class="container-fluid h-100" style="border: solid red 1px">
    <div class="row h-100 d-flex   justify-content-center align-items-center contenedor_centrado">
      <div class="col-6">
        <div class="row">
          <div class="col-12 border">
            1
          </div>
          <div class="col-12 border">
            2
          </div>
        </div>
      </div>
      <div class="col-6 border">
        3
      </div>
      <div class="row">
        <div class="col-6 border">4</div>
        <div class="col-6 border">5</div>
      </div>
    </div>
  </div>
</body>

Answer 1

只有课程的解决方案。

内部块的
my-auto类将它放在中心。

仍然存在一个问题：

您必须使用height:100vh;拉伸外部容器，以便将其拉伸至其屏幕尺寸。

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="d-flex flex-column" style="height:100vh; border:5px solid red;">
  <div class="d-flex flex-column my-auto" style="border: solid blue 1px">
    <div class="row">
      <div class="col-6">
        <div class="row">
          <div class="col-12 border">
            1
          </div>
          <div class="col-12 border">
            2
          </div>
        </div>
      </div>
      <div class="col-6 border">
        3
      </div>
    </div>
    <div class="row">
      <div class="col-6 border">4</div>
      <div class="col-6 border">5</div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

这是一种解决问题的简单方法：

<body>
<div class="h-50">
</div>
  <div style="border: solid blue 1px" >
  <div class="row">
    <div class="col-6">
      <div class="row">
        <div class="col-12 border">
          1
        </div>
        <div class="col-12 border">
          2
        </div>
      </div>
    </div>
    <div class="col-6 border">
      3
    </div>
  </div>
  <div class="row">
    <div class="col-6 border">4</div>
    <div class="col-6 border">5</div>
  </div>
</div>

</body>

我希望它有用。

Answer 3

这是使用flexbox classes ...

的最简单的Bootstrap方式

<div class="container-fluid h-100 d-flex flex-column justify-content-center" style="border: solid red 1px">
    <div class="row d-flex justify-content-center contenedor_centrado">
      <div class="col-6">
        <div class="row">
          <div class="col-12 border">
            1
          </div>
          <div class="col-12 border">
            2
          </div>
        </div>
      </div>
      <div class="col-6 border">
        3
      </div>
      <div class="row w-100">
        <div class="col-6 border">4</div>
        <div class="col-6 border">5</div>
      </div>
    </div>
  </div>

https://www.codeply.com/go/aZnnbWrMRE

另见：
Vertical Align Center in Bootstrap 4
Bootstrap 4. Center Vertical and Horizontal Alignment

最好的做法是将div放在bootstrap 4上并使用其中的行

3 个答案: