Bootstrap / CSS

使用col-12, btn-block, w-100，形式控制或宽度:100%

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <button class="btn btn-success col-12"> class="col-12" </button> <button class="btn btn-primary w-100"> class="w-100" </button> <button class="btn btn-secondary btn-block"> class="btn-block" </button> <button class="btn btn-success form-control"> class="form-control" </button> <button class="btn btn-danger" style="width:100%"> style="width:100%" </button>

2022年更新:

你有多种方法使按钮全宽。

你可以把w-100加到这门课上。 你可以在按钮上方的容器中添加d-grid和gap-2:

<div class="d-grid gap-2"> <!-- Here -->
  <button class="btn btn-primary" type="button">Button</button>
</div>

您应该将这些样式添加到CSS表中

div .no-padding {
  padding:0;
}

button .full-width{
  width:100%;
  //display:block; //only if you're having issues
}

然后更改将类添加到代码中

<div class="span9 btn-block no-padding">
    <button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button>
</div>

我还没有测试过这个，我不确定你想要什么，但我认为这将使你接近。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <button class="btn btn-success col-12"> class="col-12" </button> <button class="btn btn-primary w-100"> class="w-100" </button> <button class="btn btn-secondary btn-block"> class="btn-block" </button> <button class="btn btn-success form-control"> class="form-control" </button> <button class="btn btn-danger" style="width:100%"> style="width:100%" </button>

我们可以使用块级全宽按钮 通过添加.btn-block创建块级按钮——那些跨越父节点的全宽度的按钮。 <button type="button" class="btn btn-primary btn-lg btn-block"> 方块等级按钮 < /按钮> <button type="button" class="btn btn-secondary btn-lg btn-block"> 方块等级按钮 < /按钮>

我简单地用了这个:

<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>