1

Sei que a pergunta é meio abstrata, mas como fazer isso:

inserir a descrição da imagem aqui

Com o Semantic-UI?

Ou seja, um conjunto de thumbs sem margem nem borda, ocupando 100% da largura e de modo responsivo?

Fiz aqui, mas num ficou muito legal não, ficou com um espaço em branco do lado direito.

CSS

.capa {
  margin: 0!important;
  width: auto!important;
  height: 220px!important;
}

HTML

<div class="ui main fluid container">
  <div class="ui blue inverted segment divisor">
    <h4>Lançamentos</h4>
  </div>
  <div class="ui small images">
    <a href="tocar.php?id=276">
      <img class="capa" src="imagem.jpg">
    </a>
  </div><!-- Fim Image Group -->
</div><!-- Fim Container -->

Obrigado desde já.


EDITADO

Infelizmente troquei o Semantic-UI pelo Twitter Bootstrap 4 por não conseguir resolver.

A ajuda do colega foi inprescindível!

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-1 no-margin">
      <a href="tocar.php?id={$info[0]}">
        <img src="{$info[5]}" width="100%" class="capa" />
      </a>
    </div>
  </div><!-- Row -->
</div><!-- Container -->

CSS

.row .no-margin {
  margin: 0;
  padding: 0;
}

.capa {
  max-height: 220px;
}
0

1 Resposta 1

2

Da para fazer com a bootstrap. Agora é so uma questao de ajustar os tamanhos que voce precisa.

.row .no-margin {
    margin: 0;
    padding: 0;
}

.row.cover-list {
  margin-right: 0;
  margin-left: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row cover-list">
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
</div>

3
  • Perfeito! Uma pena que eu não consegui com o Semantic-UI, mas tá valendo. Obrigado. Commented 21/08/2016 às 13:11
  • Não havia prestado atenção, mas está aparecendo uma scrollbar horizontal, o que eu estou fazendo errado? Commented 21/08/2016 às 13:29
  • Alteri um pouquinho o codigo, adicionei a classe cover-listna div.row e tirei as margens esquerda e direita ai sumiu o scroll horizontal. Commented 21/08/2016 às 17:12

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 .