0

Recebi a tarefa de fazer um web app mobile, e estou tentando fazê-lo com a ajuda do Twitter Bootstrap. Uma das tarefas é fazer um par de botões no rodapé, ambos de tamanho igual, cada um ocupando metade da largura da tela: assim como no velho Symbian.

Como sou novo no Bootstrap, estou tendo um tempo difícil tentando chegar nesse objetivo. Tentei usar um pouco do exemplo do Sticky Footer que tem no próprio site do Bootstrap, mas ainda não tive muito sucesso.

Como recomedando, segue o código (usando Jade e Stylus por conveniência):

.footer
  .container
    .btn-group.btn-group-lg
      button.btn Sair
      button.btn Opções

E o CSS referente:

.footer
  position absolute
  bottom 0
  width 90%
  height 60px

Já adicionando, minha intenção é chegar a um resultado como esse:

+------------------+
|                  |
|                  |
|                  |
|                  |
|                  |
|                  |
|                  |
|                  |
|                  |
|                  |
+--------+---------+
| Sair   |    Menu |
+------------------+
2
  • 3
    Talvez se colocar o código que você fez, facilite a resposta.
    – Tony
    Commented 8/09/2014 às 21:43
  • @Tony não estou em casa, logo que chegar eu coloco Commented 8/09/2014 às 21:44

1 Resposta 1

1

Dentro da div do footer adicione esta div:

<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-default">Sair</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Menu</button>
  </div>
</div>

Com esses dois botões aplicado ja vai possuir os botões lado a lado e ocupando o tamanho da div.


No seu caso poderia ser utilizado tambem <ul> e <li> e setando o estilo dele para width:160px (ou 50%) pensando que seria para mobile onde o padrão é 320px.

0

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 .