Question

我有一个只有<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>

C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\DNX\Microsoft.DNX.Tasks.dll

C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\Web\Microsoft.DNX.Publishing.targets

Answer 1

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

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

}

从.ct-circle

中删除width:100%;

这是图片：

Answer 2

试试这个

CSS

print (custom_dates.searchsorted(df.index))
[ 0  0  0  0  0  0  0  0  0  0  0  0  0  1  1  1  1  1  1  1  1  1  1  1  1
  1  1  1  1  1  1  1  1  1  1  1  1  1  1  2  2  2  2  2  2  2  2  2  2  2
  2  2  2  2  2  2  2  2  2  2  2  2  2  2  2  2  2  2  2  2  2  2  2  2  2
  2  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3
  3  4  4  4  4  4  4  4  4  4  4  4  4  4  4  4  4  4  4  4  4  4  4  4  4
  4  4  4  4  4  4  4  4  4  5  5  5  5  5  5  5  5  5  5  5  5  5  5  5  5
  5  5  5  5  5  5  5  5  5  5  5  5  5  5  5  5  5  5  5  6  6  6  6  6  6
  6  6  6  6  6  6  6  6  6  6  6  6  6  6  6  6  6  6  6  7  7  7  7  7  7
  7  7  7  7  7  7  7  7  7  7  7  7  7  7  7  7  7  7  7  7  7  7  7  7  8
  8  8  8  8  8  8  8  8  8  8  8  8  8  8  8  8  8  8  8  8  8  8  8  8  8
  8  8  8  8  9  9  9  9  9  9  9  9  9  9  9  9  9  9  9  9  9  9  9  9  9
  9  9  9  9  9  9  9  9 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10
 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 11 11 11 11 11 11
 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11
 11 11 11 11 12 12 12 12 12 12 12 12 12 12 12 12]

custom_sum = df.groupby(custom_dates.searchsorted(df.index)).sum()
custom_sum.index = custom_dates
print (custom_sum)
               A
2016-01-13   784
2016-02-08  1020
2016-03-16  1893
2016-04-10  1242
2016-05-13  1491
2016-06-17  1851
2016-07-12  1319
2016-08-11  1348
2016-09-10  1616
2016-10-09  1523
2016-11-14  1793
2016-12-19  1547
2016-12-31   664

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

在bootstrap列中包装div

2 个答案: