Bootstrap 正确对齐 div答案

【问题标题】：Bootstrap align div correctlyBootstrap 正确对齐 div
【发布时间】：2018-12-12 20:02:08
【问题描述】：

我正在尝试使用引导程序将 2 个 div 元素设置为彼此相邻代码：

<div class='col-12'>

    <div class='row'>
         <div class='col-6'>
         </div>

         <div class='col-6'>
         </div>
    </div>

</div>

这很好用，唯一的问题是当窗口宽度变小时 div 重叠。当它变小时，我想将 div 设置在彼此下方然后 col-6 必须是 col-12

我怎样才能做到这一点？

【问题讨论】：

您应该阅读有关网格系统的文档。并选择您要显示的尺寸

标签： html css bootstrap-4

【解决方案1】：

您应该使用已阅读 Bootstrap Grid System 以使它们在每个屏幕宽度上对齐。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class='col-12'>

    <div class='row'>
         <div class='col-md-6 col-sm-12 col-12'>
          lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM 
         </div>

         <div class='col-md-6 col-sm-12 col-12'>
         lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM 
         </div>
    </div>

</div>

【讨论】：

xs 在 bootstrap 4 中不存在

【解决方案2】：

你可以使用sm断点...

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

<div class='col-md-12'>
    <div class='row'>
         <div class='col-sm-6'>
         </div>
         <div class='col-sm-6'>
         </div>
    </div>
</div>

【讨论】：

它们仍然重叠

【解决方案3】：

<div class='col-12'>
    <div class='row'>
         <div class='col-6 col-xs-12'>
         </div>
         <div class='col-6 col-xs-12'>
         </div>
    </div>
</div>

【讨论】：

col-xs 在 Bootstrap 4 中不再可用。根据问题代码，他正在使用 Bootstrap 4
虽然这可能会回答问题，但最好添加一些关于此答案如何有助于解决问题的描述。请阅读How do I write a good answer 了解更多信息。