5

Estou desenvolvendo este site em bootstrap http://raissafigueiredo.com.br/masterclinic/

Porém, lá embaixo na parte de especialidades, tenho 7 elementos na mesma linha. Tive que usar uma "gambiarra técnica" para alinha-los, pois não encontrei uma classe especifica que comporte os 7 na mesma linha. Na versão desktop fica tudo bem, porém na versão mobile os elementos ficam alinhados a esquerda e desorganizados.

Segue abaixo meu código:

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

Editei a porcentagem para que os elementos se comportem na mesma linha sem quebrar.

#home-especialiadade .col-sm-2 {
    width: 14.2%;
}
3
  • Marcelo, seja bem vindo ao SOpt! Explique melhor, quais elementos você precisa alinhar? O que já tentou? Edite a pergunta e insira o código que já tem, será mais fácil para alguem ajudá-lo. Commented 13/11/2015 às 12:40
  • Obrigado Mauricio. Editei e coloquei os códigos. Commented 13/11/2015 às 12:44
  • O Bootstrap tem um sistema de grid que pode te ajudar nisso. getbootstrap.com/css/#grid Commented 13/11/2015 às 13:36

4 Respostas 4

5

Você pode adicionar a classe col-xs-12, porém tem que corrigir pois a sua classe #home-especialiadade .col-sm-2 esta sobrebondo ela.

Adiona media query para sua classe #home-especialdiade .col-sm-2:

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

Para resolver o seu problema de 7 colunas você pode ver essa resposta no SO Inglês

1
  • Só para o pessoal entender: 100/7 = 14.285714285714286 Commented 13/11/2015 às 13:27
5

Existe uma maneira simples de fazer isso com a função calc do css.

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

Para garantir que valores do padding não atrapalhem no cálculo, costumo utilizar box-sizing:border-box, que calculará o tamanho do elemento literalmente, incluindo o tamanho do border e padding.

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

E por fim, utilize o famoso float:left:

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

2
  • Essa função é a solução para meus problemas! Hahah, apesar de (pelo menos por mim) ser raramente vista por aí... Commented 13/11/2015 às 13:14
  • Dei um tapa na resposta Commented 13/11/2015 às 13:27
1

Um outro método sem necessidade de especificar qualquer largura (exceto para configuração mobile, se desejar), seria utilizar um ul li com display:table-cell.

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

Veja este meu exemplo: http://jsfiddle.net/4r8mwLap/1/

Obs.: No exemplo o código está funcional com a opção de responsive.

Editado

Se desejar continuar usando div ao invés de ul li, o processo é o mesmo, basta utilizar as mesmas propriedades em divs, veja o exemplo atualizado: http://jsfiddle.net/4r8mwLap/2/

O bloco de baixo é com estrutura em div usando as mesmas propriedades do ul li.

1

Pode usar flexbox suporte:

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .