Home / Questions / 107331
Accepted
Ray
Asked: 2020-10-05 16:37:20 +0800 CST 2020-10-05 16:37:20 +0800 CST

如何让两个按钮像使用 btn-block 一样占据整个空间？

  • 772

我有以下代码，我想要的是第二行中每一列的两个按钮占用 .col 类的 100% 的空间，因为它发生在 btn-block 类的第一行中，我该怎么做它？

*{
  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>

html

1 Answers

  1. Best Answer

    布局主题的解决方案不仅仅是 CSS，您可以添加一些类并控制行的宽度。例如：

    *{
  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>

    • 1