Question

我有2列，左侧和右侧，当我在小屏幕或xs屏幕上打开网页时，两列重叠。我希望其他专栏低于另一专栏。

 <div class="container">
    <div class="row">
      <div class="col-md-3"></div>
      <div class="col-md-9 area-style"></div>
    </div>
 </div>

CSS：

.area-style {
  border: 1px solid #ccc;
  padding-top: 2em;
  background: #fafafa;
  height: 500px;
}

Answer 1

请检查您是否已为任何“col-md-3”或“col-md-9”div内的元素提供浮动。发生重叠99％如果未清除浮点数。

Answer 2

试试这个。

<div class="container">
    <div class="row">
      <div class="col-xs-12 col-md-3"></div>
      <div class="col-xs-12 col-md-9 area-style"></div>
    </div>
</div>

请告诉我这是否对你有帮助。

Answer 3

如果您使用的是Bootstrap4，请尝试此操作。

<div class="container">
    <div class="row">
      <div class="col-12 col-md-3"></div>
      <div class="col-12 col-md-9 area-style"></div>
    </div>
</div>

Bootstrap列重叠在小屏幕上

3 个答案: