Question

我正在尝试使用引导程序将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

我该如何实现？

Answer 1

您可以使用@ViewChild('fileInput') fileInput: ElementRef; resetForm() { this.form.reset(); this.fileInput.nativeElement.value = undefined; }断点...

sm

Answer 2

您应该已经阅读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>

Answer 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>

引导程序正确对齐div

3 个答案: