0

Boas, Estou a tentar fazer um container com 4 células iguais, isto é, 2 colunas e 2 linhas. Já experimentei usar col e row mas nada dá certo.

Tenho isto apenas, neste momento.

<div id="container">
        <video autoplay="true" id="video"></video>
</div>

1
  • 1
    Usa col e row e tenta fazer um estilo com video { width: 100% } 17/04/2018 às 22:23

2 Respostas 2

1

Houve uma alteração na forma de se construir grids do bootstrap 3 para o bootstrap 4

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
   <div class="row">
        <div class="col">
          coluna (0,1)
        </div>
        <div class="col">
          coluna (0,2)
        </div>   
      <div class="w-100"></div>  
      <div class="col">
          coluna (1,1)
        </div>
        <div class="col">
          coluna (1,2)
       </div>
   </div>
</div>

Confira a documentação: https://getbootstrap.com/docs/4.0/layout/grid/

1

Não sei qual Bootstrap está utilizando, se for o anterior ao 4, da para fazer assim. Clique em executar e página toda, para visualizar como em tela desktop.

video {
    margin-top: 20px;
    background-color: #ccc;
    width:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	    <div class="row">
	        <div class="col-md-6">
	            <video autoplay="true" id="video1">
	            	<source src="">
	            </video>
	        </div>
	        <div class="col-md-6">
	            <video autoplay="true" id="video2"></video>
	            <source src="">
	        </div>
	    </div>
	    <div class="row">
	        <div class="col-md-6">
	            <video autoplay="true" id="video3"></video>
	            <source src="">
	        </div>
	        <div class="col-md-6">
	            <video autoplay="true" id="video4"></video>
	            <source src="">
	        </div>
	    </div>
	</div>

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 .