How to align 7 elements on the same line?

Navigation
4

I'm developing this site in bootstrap link

However, down in the specialties section, I have 7 elements on the same line. I had to use a "gambiarra technique" to align them, as I did not find a specific class that supports the 7 in the same line. In the desktop version everything is fine, but in the mobile version the elements are left aligned and disorganized.

Below is my code: 

<div class="feature-box">
        <div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
          <div class="feature-box-heading">
            <em>
                <img width="59" height="55" alt="" src="img/icon-botox.png">
            </em>
            <h4>Botox e DTM</h4>
          </div>
        </div>
        <div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
          <div class="feature-box-heading">
            <em>
                <img width="41" height="55" alt="" src="img/icon-clareamento.png">
            </em>
            <h4>Clareamento</h4>
          </div>
        </div>
        <div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
          <div class="feature-box-heading">
            <em>
                <img width="50" height="55" alt="" src="img/icon-implantes.png">
            </em>
            <h4>
              Implantes
            </h4>
          </div>
        </div>
        <div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
          <div class="feature-box-heading">
            <em>
                <img width="50" height="55" alt="" src="img/icon-estetica.png">
            </em>
            <h4>
              Estética
            </h4>
          </div>
        </div>
        <div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
          <div class="feature-box-heading">
            <em>
                <img width="50" height="55" alt="" src="img/icon-odontologia.png">
            </em>
            <h4>
              Odontologia
            </h4>
          </div>
        </div>
        <div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
          <div class="feature-box-heading">
            <em>
                <img width="50" height="55" alt="" src="img/icon-canal.png">
            </em>
            <h4>
              Tratamento de Canal e Ronco
            </h4>
          </div>
        </div>
        <div class="col-sm-2 text-center wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;" data-wow-animation-name="fadeInUp">
          <div class="feature-box-heading">
            <em>
                <img width="38" height="55" alt="" src="img/icon-proteses.png">
            </em>
            <h4>
              Próteses
            </h4>
          </div>
        </div>
      </div>

I have edited the percentage so that the elements behave on the same line without breaking. 

#home-especialiadade .col-sm-2 {
    width: 14.2%;
}
    
asked by anonymous 13.11.2015 / 13:36

4 answers

5

You can add the class col-xs-12 , however you have to correct it because your #home-especialiadade .col-sm-2 class is overriding it.

Adds media query to your class #home-especialdiade .col-sm-2 : 

@media (min-width: 768px){
    #home-especialiadade .col-sm-2 {
        width: 14.2%;
    }
}

To resolve your 7-column problem you can see this answer in the English OS

    
13.11.2015 / 13:45
5

There is a simple way to do this with the% css% function of css. 

.minhas-colunas{
    width: calc(100% / 7);
}

To ensure that calc values do not get in the way, I usually use padding , which will literally calculate the element size, including the size of box-sizing:border-box and border . 

.minhas-colunas {
    width: calc(100%/7);
    padding:5px;
    box-sizing:border-box;/** o padding não vai atrapalhar **/
  }

Finally, use the famous padding : 

.minhas-colunas{  
  width: calc(100%/7);
  background-color: green;
  box-sizing:border-box;
  float:left;
  display:block;
  border:1px solid black;
}

.pai{
 width:500px;
 background:blue;
 padding:10px
}

.pai:after{
  clear:both;
  content: ' ';
  display:block;
}
<div class="pai">
    <div class="minhas-colunas">
    1
    </div>
    <div class="minhas-colunas">
    2
    </div>
    <div class="minhas-colunas">
    3
    </div>
    <div class="minhas-colunas">
    4
    </div>
    <div class="minhas-colunas">
    5
    </div>
    <div class="minhas-colunas">
    6
    </div>
    <div class="minhas-colunas">
    7
    </div>
  <div class="minhas-colunas">
    1
    </div>
    <div class="minhas-colunas">
    2
    </div>
    <div class="minhas-colunas">
    3
    </div>
    <div class="minhas-colunas">
    4
    </div>
    <div class="minhas-colunas">
    5
    </div>
    <div class="minhas-colunas">
    6
    </div>
    <div class="minhas-colunas">
    7
    </div>
</div>
    
13.11.2015 / 14:07
1

Another method with no need to specify any width (except for mobile configuration, if desired) would be to use a ul li with display:table-cell . 

ul {
    display:table;
    width:100%;
}
ul li {
    display:table-cell
}

See my example: link

Note: In the example the code is functional with the responsive option.

Edited

If you want to continue using div instead of ul li , the process is the same, just use the same properties in divs , see the updated example: link

The bottom block is div-structured using the same ul li properties.

    
14.11.2015 / 11:51
1

You can use flexbox support : 

section {
  display: flex;
  justify-content: space-between
}
<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</section>
    
14.11.2015 / 18:38
Print two arrays side by side How to insert a first line indent with css?