当较小的屏幕

Question

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

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

问题主要位于简介和技能框中，我似乎无法让他们调整我的方式想要：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内（所以你有display:flex）

其次，您需要在列中添加类，以设置它们在不同屏幕尺寸上的显示方式。请注意，自bootstrap4 col-xs起不存在。请改用简单的col，并在较大的屏幕上覆盖它。

在下面的示例中，我使用了：

col-lg-8部分的

col-12和INTRO。

col-lg-4列包装器上的

col-12和Skills。

col-lg-12列上的

col-4和Skills。

还添加了一行来包装Skills列

见下文或jsFIddle

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

• 您需要在skill中包含div个框并为其提供课程d-flex flex-wrap
• 通过这样做，您将得到结果而不给出负余量
{li> col-md-8 col-sm-12 intro div中的类将使其100%为。{1}} 更小的设备
• 无需进行任何css更改

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

• 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 4

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

也就是说，保持你的布局你现在的样子，然后在媒体查询中，只需将布局重新排列到屏幕重新调整大小。