使用引导程序的方形按钮答案

【问题标题】：Square buttons using bootstrap使用引导程序的方形按钮
【发布时间】：2019-11-23 08:10:46
【问题描述】：

我是引导程序和角度的新手：

我想使用引导程序制作三个平行的方形按钮。页面应该是这样的::

.................................................. ..................................................... ..................................................... ......

                                   My title(in center)


Square button-1                     square button-2               Square button-3

我的代码如下::

<div class="col-md-12 pt-md-5 text-center">My Title<div>
  <div class="button-wrapper">
    <div>
        <button>button-1</button>
    </div>
    <div>
        <button>button-2</button>
    </div>
    <div>
        <button>button-3</button>
    </div>    
  </div>

我应该怎么做才能使用引导程序使按钮变成正方形并根据需要更改文本的颜色和高度？

.button-wrapper{
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

我不想使用 css，而是想使用引导程序来获得方形按钮，并想在方形按钮而不是按钮 1、按钮 2 和按钮 3 中写长文本

【问题讨论】：

标签： angular bootstrap-4 angular7 angular8

【解决方案1】：

要使实际的按钮完全正方形几乎是不可能的，因为这取决于屏幕大小和内容。您可以使用 Bootstrap 的网格布局使它们的大小和宽度都相同。像这样的：

<div class="col-4 text-center d-flex">
    <button class="btn btn-primary p-4 rounded-0">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </button>
</div>

上面的代码将一个按钮包装在一个 div (.col-4) 中，该 div 占网格的三分之一。 .col-4 显示属性是 flex，所以它的内容会自动适应它的高度。为其他两个按钮复制此布局，您将获得三个高度相同的按钮，即使内容长度不同，它们也将始终保持相同的高度。

在https://codepen.io/BluSilva/pen/xxVReVg查看一个工作示例

旁注：如果你想让角变成方形，bootstrap 有一个控制边框半径的类，所以要制作一个方形角的按钮，你可以简单地添加 "rounded-0" 类添加到按钮的类中。

<button class="btn btn-primary rounded-0">My Button</button>

【讨论】：

【解决方案2】：

设置border-radious: 0 !important; （这里的其他答案不是“无”）

.btn{
    border-radius: 0 !important;
}

<div class="row">
  <div class="col">
<button type="button" class="btn btn-primary">buton-1</button>
  </div>
  <div class="col">
<button type="button" class="btn btn-primary">buton-1</button>
  </div>
  <div class="col">
<button type="button" class="btn btn-primary">buton-1</button>
  </div>
</div>

【讨论】：

【解决方案3】：

引导支持的方法是使用 SCSS/SASS 源文件将 SCSS 变量设置为 $enable-rounded 为 false。如果你已经使用 NPM 将引导程序包含在你的项目中，你可以使用类似的东西：

$enable-rounded: false;

@import "node_modules/bootstrap/scss/bootstrap";

有许多 SCSS 变量可以被覆盖：https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

【讨论】：