2

Preciso fazer uma lista que em até no máximo de 6 itens, pegue toda a largura da tela, seguindo os seguintes passos:

  1. Se tiver somente um item da lista, ele pegue 100% de largura da tela;
  2. Se tiver dois itens da lista, cada uma tem que pegar 50% de largura total da tela;
  3. Se tiver três itens da lista, cada um tem que pegar 33% da largura total da tela, e assim por diante até 6 itens.

Segue o código do que eu tenho feito até o momento, não consegui fazer e preciso fazer isto somente com CSS. Estou utilizando Bootstrap.

https://codepen.io/maur-cio-gabriel-kr-ger/pen/yQQxeN?editors=1100

4
  • Seu exemplo não mostra a lista preenchendo toda a lateral. Você não quis dizer que preenche todo o comprimento da tela? Commented 29/11/2018 às 16:46
  • O Sass cairia bem, dá uma pesquisada sobre. Commented 29/11/2018 às 16:49
  • Pergunta reformulada para melhor entendimento. Commented 29/11/2018 às 17:04
  • Da onde a página vai puxar esses elementos do banco de dados?
    – Luiz
    Commented 29/11/2018 às 17:14

3 Respostas 3

4

Acredito que o que você precisa seja o recurso de auto layout columns. Basta que você não especifique o tamanho da coluna e deixe que o próprio Bootstrap se encarregue disso. Creio que por "baixo dos panos" seja utilizado flex layout, pois o comportamento é muito semelhante.

/* Somente para visualizar as colunas. */
.col:nth-child(1){ background: #34ace0 }
.col:nth-child(2){ background: #33d9b2 }
.col:nth-child(3){ background: #ffda79 }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class='container-fluid'>
  <div class='row'>
    <div class='col'>Item 1</div>
    <div class='col'>Item 2</div>
    <div class='col'>Item 3</div>
  </div>
</div>

<br>

<div class='container-fluid'>
  <div class='row'>
    <div class='col'>Item 1</div>
    <div class='col'>Item 2</div>
  </div>
</div>

<br>

<div class='container-fluid'>
  <div class='row'>
    <div class='col'>Item 1</div>
  </div>
</div>

2

Você pode usar flexbox para dividir a largura da tela igualmente entre os elementos da lista.

Bastaria usar display: flex; na <ul> e flex-grow nas <li>.

Aqui tem um bom cheatsheet de flexbox.

Exemplo:

let btn = document.querySelector('#add');
let lista = document.querySelector('#lista');

btn.addEventListener('click', function() {
    let item = document.createElement('li');
    item.innerHTML = 'Item';
    lista.appendChild(item);
});
ul {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

ul > li {
  flex-grow: 1;
}

/* O CSS abaixo é apenas para facilitar a visualização */
ul {
  list-style: none;
  padding: 0;
}

ul > li {
  background-color: #ffdd57;
  text-align: center;
  padding: 10px;
}

ul > li:nth-of-type(2n) {
  background-color: #00d1b2;
}
<ul id="lista">
  <li>Item</li>
</ul>

<hr>

<button id="add">Add</button>

2
  • Cheguei atrasado :p
    – hugocsl
    Commented 29/11/2018 às 17:16
  • 1
    Essa questão é a tua cara mesmo! hahahah Commented 29/11/2018 às 17:33
1

Você não está utilizando a principal utilidade do Bootstrap que é o sistema de grid.

Acredito que isso aqui vai te servir.

Você sempre precisa ter as classes col dentro da classe 'row' para que se reajustem sempre de acordo com o tamanho do navegador ou dispositivo

<main class='container'>
    <div class='row'>
         <div class='col'>Link lorem ipsum dolor</div>
         <div class='col'>Link lorem ipsum dolor</div>
         <div class='col'>Link lorem ipsum dolor</div>
    </div>
</main>

Quantos mais div´s com col dentro de row, irá automaticamente dividir certinho. Caso não vá buscar a informação do banco de dados, você pode deixar dinâmico com JS.

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 .