html - 在 Bootstrap 3 中，如何让每行只有五个图标？

Question

我想使用 bootstrap 3 连续放置五个相同的图标。我知道在 Bootstrap 4 中，这很容易做到，但现在，我想知道如何使用 bootstrap 3 来完成。 本质上，我想连续有五个图标，如果超过五个图标，那么第 6 个图标将移到下一行(如换行)。这是当前的设置方式:https://jsfiddle.net/cliffeee/bjhvpf7q/17/ .

Answer 1

我正在使用display:flex 概念。希望对您有所帮助。如果有任何更改，请告诉我。

https://jsfiddle.net/1o6fjk08/3/

.col-xs-2 {
  background: red;
  color: #FFF;
  width:16%;
  margin-right:10px;
  margin-left:10px;
  margin-bottom:15px;
  height:100%;
}
.row{
  display: flex;
  flex-wrap: wrap;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row" style="border: 1px solid #000">
    <div class="col-xs-2 col_wrap" id="p1">Col One</div>
    <div class="col-xs-2 col_wrap" id="p2">Col Two</div>
    <div class="col-xs-2 col_wrap" id="p3">Col Three Three</div>
    <div class="col-xs-2 col_wrap" id="p4">Col Four</div>
    <div class="col-xs-2 col_wrap" id="p5">Col Five</div>
    <div class="col-xs-2 col_wrap" id="p6">Col Six</div>
    <div class="col-xs-2 col_wrap" id="p6">Col seven</div>
    <div class="col-xs-2 col_wrap" id="p6">Col Eight</div>
    <div class="col-xs-2 col_wrap" id="p6">Col Nine</div>
    <div class="col-xs-2 col_wrap" id="p6">Col Ten</div>
    <div class="col-xs-2 col_wrap" id="p6">Col Eleven</div>
    <div class="col-xs-2 col_wrap" id="p6">Col Twelve</div>
      <div class="col-xs-2 col_wrap" id="p6">Col Thirteen</div>
        <div class="col-xs-2 col_wrap" id="p6">Col Fourteen</div>
        <div class="col-xs-2 col_wrap" id="p6">Col Fifteen</div>
  </div>
</div>

或者你可以使用display: inline-block;这里附上代码。请检查一下。如果有任何变化，请告诉我。

https://jsfiddle.net/x65ot3wu/7/

ul {
  padding-top: 20px
}

ul li {
  list-style-type: none;
  width: 16%;
  margin: 0 5px;
  display: inline-block;
  margin-bottom:10px;
  
}

ul li i {
  font-size: 24px !important
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <ul>
    <li><i class="fa fa-address-book" aria-hidden="true"></i></li>
    <li><i class="fa fa-bandcamp" aria-hidden="true"></i></li>
    <li><i class="fa fa-envelope-open" aria-hidden="true"></i></li>
    <li><i class="fa fa-id-card" aria-hidden="true"></i></li>
    <li><i class="fa fa-telegram" aria-hidden="true"></i></li>
    <li><i class="fa fa-snowflake-o" aria-hidden="true"></i></li>
    <li><i class="fa fa-user-circle-o" aria-hidden="true"></i></li>
  </ul>

</div>