如何在Bootstrap中管理较小尺寸的页面？

Answer 1

当你在代码中说 col-sm-6 意味着从小尺寸（576px）开始采用这个尺寸

<div class="container-fluid">
   <div class="row">
      <div class="col-12 col-sm-8 col-md-6"></div>
      <div class="col-12 col-sm-4 col-md-6"></div>
   </div>
</div>

//

<div class="col-12 col-sm-8 col-md-6"></div>

这段代码传达的概念是

col-12：通常占据所有小于small的列

col-sm-8：从小模式开始占据 8 列（576px）

col-md-6：从中模式开始占据 6 列（768px）

我们还可以按需使用col-lg，这取决于我们的需求。

我希望我明白你的意思并且我能够很好地帮助你

Answer 2

你应该尝试下面的代码，

<div class="container">
   <div class="row">
      <div class="col">
         Here col is used for auto width (if row has multiple elements in column so col width will be adjusted automatically by dividing them)
      </div>
   </div>
</div>

或

<div class="container">
       <div class="row">
          <div class="col-12">
             Here col-12 is used so this will get entire width of the viewport (12 grids) as it is specified..
          </div>

          <div class="col">
             Here col is used so as above div has col-12 class so this col will get auto width and there is no more columns in this row so this will get 100% of width.
          </div>
       </div>
    </div>

注意：适用于移动设备等小型设备（<576px) only col is used and col itself uses all 12 grids but if we have multiple columns in row and we want to give different grids to them, then we have to specify as col-6, col-4, col-12 etc as per requirement...

有关更多详细信息，我已附加一些链接并仅供参考...

引导网格系统

谢谢... 阿拉普·乔希