css - Bootstrap，行中的中心按钮

Question

我在每个 col-md-4 中将所有按钮居中时遇到问题:

<div class="row position-relative mt-2">
  <div class="col-md-4 center-block">
    <div class="center-block align-to-bottom">
      <div class="btn-group-vertical">
        <p>
          <button class="btn btn-info btn-sm btn-block" type="button">
            button
          </button>
        </p>
        <p>
          <button class="btn btn-warning btn-sm btn-block" type="button">
            button
          </button>
        </p>
      </div>
    </div>
  </div>
  <div class="col-md-4 center-block">
    <div class="btn-group-vertical">
      <p>
        <button class="btn btn-info btn-sm btn-block" type="button">
          button
        </button>
      </p>
      <p>
        <button class="btn btn-info btn-sm btn-block" type="button">
          button
        </button>
      </p>

      <p>
        <button class="btn btn-warning btn-sm btn-block" type="button">
          button
        </button>
      </p>
    </div>
  </div>
  <div class="col-md-4 center-block">
    <p>
      <button class="btn btn-success btn-sm btn-block" type="button">
        button
      </button>
    </p>
  </div>
</div>

还有第二个问题 -> 我也使用 w-100、h-85...但它不起作用。我也在寻找设置按钮相对大小的解决方案。

Answer 1

要水平对齐按钮，您只需将类 text-center 添加到父列即可。

我还删除了 p 标签，而是使用类 mb-2

将边距添加到按钮本身

我确实也删除了很多你的类，因为它们似乎不是 Bootstrap 4 类。如果需要这些，只需将它们添加回您认为有必要的地方即可。

此外，我没有将您的按钮设置为一个 block ，使其具有您父级的整个宽度，而是添加了另一行并将每个按钮放在其自己的全宽列中，该列将充当 block 。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mt-2">
  <div class="col-md-4 text-center">
    <div class="row">
    
      <div class="col-12 mb-2">
        <button class="btn btn-info btn-sm" type="button">
          Button
        </button>
      </div>
        
      <div class="col-12 mb-2">
        <button class="btn btn-warning btn-sm" type="button">
          Button
        </button>
      </div>
     
      <div class="col-12 mb-2">
        <button class="btn btn-warning btn-sm" type="button">
          Button
        </button>
      </div>
        
    </div>
  </div>
  <div class="col-md-4 text-center">
    <div class="row">
    
      <div class="col-12 mb-2">
        <button class="btn btn-info btn-sm" type="button">
          Button
        </button>
      </div>
        
      <div class="col-12 mb-2">
        <button class="btn btn-info btn-sm" type="button">
          Button
        </button>
      </div>
        
      <div class="col-12 mb-2">
        <button class="btn btn-warning btn-sm" type="button">
          Button
        </button>
      </div>
        
    </div>
  </div>
  <div class="col-md-4 text-center">
    <button class="btn btn-success btn-sm" type="button">
      Button
    </button>
  </div>
</div>

我希望这能解决您的问题，如果这不是您想要的，请告诉我。