如何更改Bootstrap按钮的形状

Question

我该如何将Bootstrap中默认的圆角按钮改成普通矩形按钮？现在我只能改变按钮的大小、颜色或字体。

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

.btn-sm,
.btn-xs {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

感谢您的帮助

- Gavin Niu

Answer 1

根据GetBootstrap.com的说明，添加rounded-0类：

<a href="tel:[phone]" class="btn btn-lg btn-success rounded-0"><img src="">Call Now</a>

- Saif Islam

---

为了让其他读者确认，这只适用于Bootstrap 4，然而另一个解决方案更适合Bootstrap 3。 - TidyDev

是的，Bootstrap 4为此提供了解决方案：https://getbootstrap.com/docs/4.0/utilities/borders/。 - Adil Saju

在Bootstrap 5中也适用。非常好，简洁而优雅。谢谢！ - bizna

Answer 2

最佳做法是创建一个自定义类，这样您就不会更改基本CSS，以防您想在其他地方使用它，然后应用更改。

在我的示例中，我使用了 .btn.btn-custom-lg、.btn.btn-custom-sm、.btn.btn-custom-xs，但如果您只想为所有按钮更改诸如border-radius之类的属性，可以创建一个全局类来应用于按钮：.btn-square { border-radius: 0; }

请查看工作示例。

/*Specific Cases*/

.btn.btn-custom-lg,
.btn.btn-custom-sm,
.btn.btn-custom-xs {
  border-radius: 0;
}
/*Global*/

.btn.btn-square {
  border-radius: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <hr>
  <h3>Specific</h3>
  <div class="btn btn-default btn-lg btn-custom-lg">Button Default</div>
  <div class="btn btn-default btn-sm btn-custom-sm">Button Default</div>
  <div class="btn btn-default btn-xs btn-custom-xs">Button Default</div>
  <hr>
  <h3>Global</h3>
  <div class="btn btn-default btn-lg btn-square">Button Default</div>
  <div class="btn btn-default btn-sm btn-square">Button Default</div>
  <div class="btn btn-default btn-xs btn-square">Button Default</div>
</div>

- vanburen