Estoy tratando de mostrar divs uno al lado del otro en una página. Sin embargo, si solo hay una clase div col-md-6 en la página, estoy tratando de mostrarla a todo lo ancho (100%) en lugar de 50%. Actualmente está usando solo el 50%, incluso si solo hay un col-md-6 . ¿Hay alguna manera de hacer esto usando CSS? Aquí está mi HTML y CSS:
<div class="col-md-6 textcontent"> </div> <div class="col-md-6 service"> </div> <div class="col-md-6 textcontent"> </div>CSS
.col-md-6{ width50%; }Flexbox es el camino a seguir aquí. Aquí hay un ejemplo:
.wrap { display: flex; flex-direction: row; justify-content: space-evenly; margin-bottom: 2rem; } .item { flex-grow: 1; /* For display purposes */ padding: 1rem; } .pink { background-color: pink; } .blue { background-color: lightblue; } .green { background-color: lightgreen; } .orange { background-color: coral; } <section class="wrap"> <div class="item pink"> Content 1 </div> <div class="item blue"> Content 2 </div> <div class="item green"> Content 3 </div> </section> <section class="wrap"> <div class="item orange"> Content Solo </div> </section>Si está utilizando el arranque, puede usar la clase col-md-12 para agregar una columna de ancho completo. El sistema de cuadrícula de arranque viene como un sistema de fracciones y su número se dividirá por 12. Entonces, si dividimos 6 por 12, la respuesta es 0.5 y eso significa 50%. Es por eso que está agregando una columna de 50% de ancho. Entonces, cuando sumamos 12, se dividirá por 12/12 y el ancho será 100%. Puede seguir la pauta del sistema de cuadrícula Bootstrap para obtener más información sobre las distintas proporciones de ancho y cómo crear una cuadrícula receptiva.
<div class="col-md-12 service"></div>Si está tratando de construir esto usted mismo, defina otra clase con un nombre y agregue el ancho: 100%;
.col-md-12{ width:100%; }Luego agregue ese nombre de clase a su atributo de clase html
<div class="col-md-12 service"></div>