当屏幕较小时，bootstrap col 彼此相邻调整大小

Question

我正在尝试制作响应式网络布局，例如：

调整大小后，我希望技能在简介下方彼此相邻：

问题主要出在 intro 和 skill 框，我似乎无法让它们按照我想要的方式进行调整： https://jsfiddle.net/aq9Laaew/20858/

HTML：

<div class="container">
  <div class="row">
    <div class="col text-center">HEAD</div>     
  </div>
  <div class="row">
    <div class="col">
      INTRO
    </div>
    <div class="col p-0">
      <div class="col m-0">SKILLS</div>
      <div class="col m-0">SKILLS</div>
      <div class="col m-0">SKILLS</div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      EDUCATION
    </div>
    <div class="col">
      EXPERIENCE
    </div>
  </div> 
  <div class="row">
    <div class="col">OTHER</div>
  </div>
</div>

CSS：

.row {
  background: #f8f9fa;
  margin:10px;
}

.col {
  border: solid 1px #6c757d;
  margin: 10px;
}

.row, .col {
   min-width: 120px;
}

他们一直在彼此下方设置我只想要当屏幕是额外的小。这很简单，但我就是想不通...

我尝试为介绍添加col-4（因为介绍应该比技能更广泛）并且在技能框上更多地弄乱了列，没有运气..

Answer 1

有一些问题会阻止您获得所需的布局：

• cols 必须是 row 的直系子代...技能需要放在另一行中。
• 使用col-sm 允许列在较小的布局上垂直堆叠。
• 不要调整行或列的边距，因为这会破坏网格的工作方式。

工作演示：https://www.codeply.com/go/0g48AjUW4E

<div class="container">
  <div class="row">
    <div class="col p-0 text-center">HEAD</div>     
  </div>
  <div class="row">
    <div class="col-sm p-0">
      INTRO
    </div>
    <div class="col-md-auto p-0">
        <div class="row no-gutters">
          <div class="col col-sm col-md-12">SKILLS</div>
          <div class="col col-sm col-md-12">SKILLS</div>
          <div class="col col-sm col-md-12">SKILLS</div>
        </div>
    </div>
  </div>
  <div class="row">
    <div class="col p-0">
      ED
    </div>
    <div class="col p-0">
      EXPERIENCE
    </div>
  </div> 
  <div class="row">
    <div class="col p-0">OTHER</div>
  </div>
</div>

CSS：

.row {
  background: #f8f9fa;
}

.col,.col-sm {
  border: solid 1px #6c757d;
}

Answer 2

首先，当您分成多个列时，您应该将它们包装在 row 中（这样您就有了 display:flex ）

其次，您需要向列中添加类以设置您希望它们在不同屏幕尺寸上的显示方式。请注意，从 bootstrap4 开始，col-xs 不存在。改用col simple 并在更大的屏幕上覆盖它。

在下面的例子中我使用了：

col-lg-8 和 col-12 在INTRO 部分。

col-lg-4 和 col-12 在 Skills 列包装器上。

col-lg-12 和 col-4 在 Skills 列上。

还添加了一行来包装Skills 列

见下文或jsFIddle

.row {
  background: #f8f9fa;
  margin: 10px;
}

[class*="col-"] {
  border: solid 1px #6c757d;
}

.row,
[class*="col-"] {
  min-width: 120px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col text-center">HEAD</div>
  </div>
  <div class="row">
    <div class="col-lg-8 col-12">
      INTRO
    </div>
    <div class="col-lg-4 col-12 p-0">
      <div class="row mx-0">


        <div class="col-lg-12 col-4 m-0">SKILLS</div>
        <div class="col-lg-12 col-4 m-0">SKILLS</div>
        <div class="col-lg-12 col-4 m-0">SKILLS</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      EDUCATION
    </div>
    <div class="col">
      EXPERIENCE
    </div>
  </div>
  <div class="row">
    <div class="col">OTHER</div>
  </div>
</div>

Answer 3

• 您需要将skill 包装在div 中并为其指定类d-flex flex-wrap
• 通过这样做，您将获得结果而不给出负边距
• col-md-8 col-sm-12 intro div 中的类将使其成为 100% for 更小的设备
• 无需对css 进行任何更改

.row {
  background: #f8f9fa;
  margin:10px;
}

.col {
  border: solid 1px #6c757d;
  margin: 10px;
}

.row, .col {
   min-width: 120px;
}

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col text-center">HEAD</div>     
  </div>
  
  <!-- Changes here -->
  <div class="row">
      <div class="col-md-8 col-sm-12">
        INTRO
      </div>
      <div class="col p-0">
        <div class="d-flex flex-wrap">
          <div class="col-4 col-md-12 m-0">SKILLS</div>
          <div class="col-4 col-md-12 m-0">SKILLS</div>
          <div class="col-4 col-md-12 m-0">SKILLS</div>
        </div>
      </div>
    </div>
   <!-- Changes Ends here --> 
   
  <div class="row">
    <div class="col">
      EDUCATION
    </div>
    <div class="col">
      EXPERIENCE
    </div>
  </div> 
  <div class="row">
    <div class="col">OTHER</div>
  </div>
</div>

Answer 4

我会为此使用媒体查询。 https://www.w3schools.com/css/css3_mediaqueries.asp

也就是说，保持您现在想要的布局，然后在媒体查询中，只需将布局重新排列为您希望它在屏幕重新调整大小时变成的样子。