引导样式圆角答案

【问题标题】：Bootstrap styling Rounded Corners引导样式圆角
【发布时间】：2020-12-03 05:47:27
【问题描述】：

我不知道为什么我在 Bootstrap 中的字段没有圆角。当我在网站的其他部分选择表单控件输入字段时，边角是圆角的。

              <div class='form-group'>
                <div class='col-sm-12'>
                  {{ trans('Suburb') }}:
 {{ Form::text('suburb', Input::get('suburb') ? e(Input::get('suburb')) : '', array('class' => 'suburb form-control')) }}
                 </div>

              </div>
              <div class='form-group'>
 <div class='col-sm-4'>
                {{ trans('Postcode') }}
{{ Form::text('postcode', Input::get('postcode') ? e(Input::get('postcode')) : '', array('class' => 'postcode form-control')) }}
                  </div>

                <div class='col-sm-4'>
                 {{ trans('Region') }}:
{{ Form::text('region', Input::get('region') ? e(Input::get('region')) : '', array('class' => 'region form-control')) }}
                 </div>
               <div class='col-sm-4'>
               {{ trans('State') }}:
{{ Form::text('state', Input::get('state') ? e(Input::get('state')) : '', array('class' => 'state form-control')) }}
                </div>
              </div>
            </fieldset>

在 Chrome 中，当我关闭这些设置时，它会变成圆形

media="all"
.user-profile .btn-group .form-control, .browse .btn-group .form-control {
border-top: 0px;
border-bottom: 0px;
border-radius: 0px;
margin-bottom: -1px;
}

如何永久更改上述代码？

【问题讨论】：

你能发布没有模板标签的生成HTML吗？
您是否使用过网络检查器来验证是否有任何东西覆盖了引导 css？
您是否缺少此页面上对您的 CSS 的引用？
@MichaelBurns 是的，我将其附加到代码中
除了 bootstrap 之外，您是否还在使用任何其他可能会更改表单控件或输入字段的 css？

标签： css twitter-bootstrap

【解决方案1】：

更改.form-control 属性

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

【讨论】：

@Francisc0 根据Caniuse，在您的客户使用 Firefox 1.X 或 Chrome 3 及更低版本之前，您不应使用供应商前缀。
@AlexZhukovskiy 答案是 2 岁。我建议 autoprefixer 使用 Can I Use github.com/postcss/autoprefixer 中的值作为 CSS 规则的供应商前缀
@MuhammedAthimannil 谢谢你的链接。但无论如何，即使是 2 年前的 FF 1.x 和 Chrome 2 也已经过时了。
@AlexZhukovskiy 这完全取决于项目要求?

【解决方案2】：

我知道你有：

border-radius: 0px;

这会产生方角。

【讨论】：

在引导程序中制作圆形边框的代码是什么？我只是在我的所有页面中使用 class= 表单控件来制作字段并且它们都是圆形的，除了在这个页面中
试试border-radius: 4px;

【解决方案3】：

修好了

 * {
      -webkit-border-radius: 4px !important;
         -moz-border-radius: 4px !important;
              border-radius: 4px !important;
      -webkit-border-top: 4px !important;
         -moz-border-top: 4px !important;
              border-top: 4px !important;
      -webkit-border-bottom: 4px !important;
         -moz-border-bottom: 4px !important;
              border-bottom: 4px !important;
    }

【讨论】：

这太过分了，您根本无法在任何地方的任何其他元素上使用border-radius。只需在您的 css 中覆盖它（应该在引导后包含在您的页面中）.form-control { border-radius: initial } 或 .form-control { border-radius: 0px } 这样您就只针对表单输入

【解决方案4】：

据我了解，您希望表单控件是四舍五入的？如果是这样的话，你就用这个：

.form-control {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;

  border-radius: 50px;
}

或者如果你想要它是方形的，你只需将 0 作为值。

您可以在此链接上试验边界半径： http://border-radius.com/

【讨论】：