Question

我正在尝试为我的表单输入正方形而不是在引导程序中舍入但我没有运气。 CSS适用于按钮，但输入表单仍然是圆形的。我在这做错了什么？

  <form class="navbar-form pull-right">

                    <div class="form-group form-group-sm">

                    <input type="email" class="form-control input" id="email" name="email" placeholder="jane.doe@example.com">
                    </div>

                    <input type="submit" class="btn btn-sm" name="submit" value="Submit" id="submit"/>
                    </div>

                </form>

CSS

 .form-control {
border-radius: 0;
}

Answer 1

您的CSS规则不够具体，无法覆盖Bootstrap CSS。相反，只需使用：

/D

<强> bootply example

要了解有关CSS特异性的更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 2

最简单的方法是使用Bootstrap border utilities rounded-0

https://v4-alpha.getbootstrap.com/utilities/borders/

<input type="email" class="form-control input rounded-0" id="email" name="email" placeholder="jane.doe@example.com">

Answer 3

尝试更改.form-control属性

.form-control{
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

Answer 4

这就是我为使它们成为正方形所做的，

<input type="email" style="border-radius: 0 !important" class="form-control input" id="email" name="email" placeholder="jane.doe@example.com">

Answer 5

.form-group-sm .form-control {
      border-radius: 0;
}

这似乎是一个特殊问题，修改.form-group-sm .form-control { }会删除边框半径。

Bootstrap表单输入边缘不会从舍入变为方形

5 个答案: