0
votes

Dans Bootstrap 3, comment n'avoir que cinq icônes par ligne?

Je voudrais avoir cinq icônes égales d'affilée, en utilisant bootstrap 3. Je sais que dans Bootstrap 4, c'est facile à faire, mais pour l'instant, je me demandais comment cela peut être fait en utilisant bootstrap 3. Essentiellement, je veux avoir cinq icônes d'affilée, et s'il y a plus de cinq icônes, alors la 6ème icône sera déplacée à la ligne suivante (comme l'habillage). Voici comment il est actuellement configuré: https://jsfiddle.net/cliffeee/bjhvpf7q/17/ .

html css twitter-bootstrap-3

1 commentaires

Est-ce que cela répond à votre question? Cinq colonnes égales dans le bootstrap Twitter

3 Réponses :

-1
votes

Essayez ceci,

<div class="row justify-content-center">
  <div class="col-md-2">1</div>
  <div class="col-md-2">2</div>
  <div class="col-md-2">3</div>
  <div class="col-md-2">4</div>
  <div class="col-md-2">5</div>
  <div class="col-md-2">6</div>
</div>

0 commentaires

1
votes

Essayez ceci ...

<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" id="p1">Col One</div>
        <div class="col-xs-2 col-half-offset" id="p2">Col Two</div>
        <div class="col-xs-2 col-half-offset" id="p3">Col Three</div>
        <div class="col-xs-2 col-half-offset" id="p4">Col Four</div>
        <div class="col-xs-2 col-half-offset" id="p5">Col Five</div>
        <div>6 lorem ipsum is simply</div>
    </div>
</div>

.col-xs-2{
    background:red;
    color:#FFF;
}
.col-half-offset{
    margin-left:4.166666667%
}

0 commentaires

2
votes

J'utilise display: flex concept . J'espère que cela vous aidera.Si vous changez, faites-le moi savoir.

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

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

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
}

ou vous pouvez utiliser display: inline-block ; Ici, je joins le code. S'il te plaît vérifie le. Si vous changez, faites-le moi savoir.

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

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

.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;
}

2 commentaires

Salut @Revti, merci d'avoir montré différentes façons de l'aborder, cela aide un peu.

Bonjour Peter. à toute heure. tout votre problème est-il résolu? ou avez-vous besoin d'aide? S'il vous plaît, faites-moi savoir.