1

Tengo el sigiuente código, lo que quiero, es que los dos botones de cada columna en la segunda fila ocupen el 100% del espacio de la clase .col como pasa en la primera fila con la clase btn-block, ¿cómo podría hacerlo?

*{
  border-radius: 0px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<div class="container-fluid">

  <div class="row">
  
    <div class="col">
      <button type="button" class="btn btn-block btn-dark">Column 1 - Row 1</button>
    </div>
    
    <div class="col">
      <button type="button" class="btn btn-block btn-dark">Column 2 - Row 1</button>
    </div>
    
  </div>

  <br />

  <div class="row">
  
    <div class="col">
      <div class="btn-group btn-group-block" role="group">
        <button type="button" class="btn btn-secondary">356a</button>
        <button type="button" class="btn btn-danger">Column 1 - Row 2</button>
      </div>
    </div>
    
    <div class="col">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-secondary">356a</button>
        <button type="button" class="btn btn-danger">Column 2 - Row 2</button>
      </div>
    </div>
  </div>
  
</div>

1 respuesta 1

1

La solución a temas de diseño es más de CSS, puedes añadir algunas clases y controlar el ancho de las filas. Por ejemplo:

*{
  border-radius: 0px !important;
}
.btn-group .btn {
  width: 50%;
}
.btn-group {
  width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<div class="container-fluid">

  <div class="row">
  
    <div class="col">
      <button type="button" class="btn btn-block btn-dark">Column 1 - Row 1</button>
    </div>
    
    <div class="col">
      <button type="button" class="btn btn-block btn-dark">Column 2 - Row 1</button>
    </div>
    
  </div>

  <br />

  <div class="row">
  
    <div class="col">
      <div class="btn-group btn-group-block" role="group">
        <button type="button" class="btn btn-secondary">356a</button>
        <button type="button" class="btn btn-danger">Column 1 - Row 2</button>
      </div>
    </div>
    
    <div class="col">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-secondary">356a</button>
        <button type="button" class="btn btn-danger">Column 2 - Row 2</button>
      </div>
    </div>
  </div>
  
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.