Question

我是不熟悉Bootstrap和Angle的人

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

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

                                   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，而是想使用bootstrap来拥有方形按钮，并希望在方形按钮中写一个长文本，而不是button-1，button-2和button-3

Answer 1

.btn{
    border-radius:50%; !important;
}

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

只写这个

Answer 2

哦，sooryu要在样式表中添加方形按钮添加.btn{border-radius: none!important;}，它将通过添加引导程序链接自动进行更改

/* this is for bootstrap it will automatical change ur butoon in square if u want just change it class btn this where u can change by the way don't forget to add !important in the end of style */

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

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

Answer 3

check1 = lambda n: '1' not in bin(abs(n))[3:] and n != 0

Answer 4

引导程序支持的方法是使用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

Answer 5

设置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>

Answer 6

要使实际按钮准确地变成正方形几乎是不可能的，因为这取决于屏幕的大小和内容。您可以使用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会提供一个控制边框半径的类，以便制作带有角的按钮，您只需添加 “四舍五入” 类到按钮的类。

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

使用引导程序的方形按钮

6 个答案: