使用bootstrap的方形按钮

Question

我刚接触bootstrap和angular：

我想用bootstrap做三个平行的正方形按钮。页面应该是这样的：：

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

                                   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>

如何使用bootstrap使按钮成为方形，并根据需要更改文本的颜色和高度？

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

我不想使用css，而是我想使用bootstrap有sqaure按钮，并想写一个长文本在方形按钮，而不是按钮-1，按钮-2和按钮-3

Answer 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的display属性是flex的，所以它的内容会自动适应它的高度。将此布局复制到其他两个按钮，您将获得三个高度相等的按钮，即使内容长度不同，它们的高度也将始终相同。

请参阅https://codepen.io/BluSilva/pen/xxVReVg上的工作示例

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

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

Answer 2

支持bootstrap的方法是使用SCSS/SASS源文件，将SCSS变量设置为$enable-rounded为false。如果您已经使用NPM将bootstrap包含到您的项目中，则可以使用以下内容：

$enable-rounded: false;

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

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

Answer 3

设置border-radious: 0 !important; (此处的其他答案状态不是'none‘)

​

.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>

​