在引导列中包装 div答案

【问题标题】：Wrap divs in bootstrap column在引导列中包装 div
【发布时间】：2017-01-25 23:03:13
【问题描述】：

我有一个带有少量<div>s（边框圈）的容器，我希望它们在分辨率降低时换行。容器有class="col-md-8"。它表现良好，但在较小的分辨率下，整个 container 会超出背景。相反，它应该包装每个<div> 并将其放在其他人之下。这是一个类似的结果，就像我想要达到的那样：

#ct-skills{
  background: grey;
  height: 460px;
  width: 100%;
  text-align: center;
  border: 3px solid green;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  }

  h3{
    font-size: 24px;
    font-family: "Raleway";
    color: rgb(255, 255, 255);
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid blue;
  }

  #skills-circles{
    display: flex;
    border: 1px solid yellow;
    float: none;
    margin: 0 auto;
   }

   .ct-circle{
     width: 100%;
     height:100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     }

     .circle{
       height: 150px;
       width: 150px;
       border: 5px solid black;
       border-radius: 50%;
       font-size: 16px;
       font-family: "Raleway";
       color: rgb(255, 255, 255);
       display: flex;
       align-items: center;
       justify-content: center;
      }
      
      span{
        font-size: 16px;
        font-family: "Raleway";
        color: rgb(255, 255, 255);
      }

<div class="container" id="ct-skills">
  <h3>Our skills</h3>
  <div class="col-md-8" id="skills-circles">
    <div class="ct-circle">
      <div class="circle">
        <span>10%</span>
      </div>
      <span>Marketing</span>
    </div>
    <div class="ct-circle">
      <div class="circle">
        <span>10%</span>
      </div>
      <span>Research</span>
    </div>
    <div class="ct-circle">
      <div class="circle">
        <span>10%</span>
      </div>
      <span>Management</span>
    </div>
    <div class="ct-circle">
      <div class="circle">
        <span>10%</span>
      </div>
      <span>Consultancy</span>
    </div>
    <div class="ct-circle">
      <div class="circle">
        <span>10%</span>
      </div>
      <span>Promotion</span>
    </div>
  </div>  
</div>

【问题讨论】：

引导列需要放置在 row 元素中才能正常工作。
我之前尝试过这个解决方案，但它对我不起作用。也许是因为我应用了 flex 属性，它覆盖了引导程序的原始代码。因此它不起作用
当您对引导布局机制的工作方式进行重大更改时，您不能指望事情仍然按预期工作。 Bootstrap v4 支持 flexbox，但如果你只能使用 v3，那么我建议你完全自己设计这个（网站的特定部分），不要使用任何 bootstrap 布局类。

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

试试这个

CSS

#ct-skills{
  background: grey;
  width: 100%;
  text-align: center;
  border: 3px solid green;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  }

  h3{
    font-size: 24px;
    font-family: "Raleway";
    color: rgb(255, 255, 255);
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid blue;
  }

  #skills-circles{
    display: flex;
    border: 1px solid yellow;
    float: none;
    margin: 0 auto;
    flex-wrap: wrap;
    padding: 20px;
   }

   .ct-circle{
     min-height: 150px;
     min-width: 150px;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     justify-content: center;
     margin: 20px;
     }

     .circle{
       min-height: 100%;
       min-width: 100%;
       box-sizing: border-box;
       border: 5px solid black;
       border-radius: 50%;
       font-size: 16px;
       font-family: "Raleway";
       color: rgb(255, 255, 255);
       display: flex;
       align-items: center;
       justify-content: center;
      }

      span{
        font-size: 16px;
        font-family: "Raleway";
        color: rgb(255, 255, 255);
      }

演示 - https://jsfiddle.net/zeo5amvn/

【讨论】：

就是这样！很好！那么你能解释一下主要问题是什么吗？我看到你添加了最小宽度和高度。
这是弹性盒功能

【解决方案2】：

如果我真的明白你想要什么，你只能通过一点改变来做到这一点：

#skills-circles {
display: flex;
border: 1px solid yellow;
float: none;
margin: 0 auto;
flex-wrap: wrap;

}

并从 .ct-circle 中删除 width:100%;

这是图片：

【讨论】：

我希望 #skills-circles 内嵌显示。添加 flex wrap 后，它显示为一列，这不是我想要实现的效果。 Width 属性在那里，因为我有一个背景图像，我想覆盖所有宽度空间。