CSS Bootstrap 样式圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22082809/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap styling Rounded Corners
提问by Stephenmelb
I don't know why my fields in Bootstrap don't have the rounded corners. When I choose the Form Control input field in other parts of my website the corners are well rounded.
我不知道为什么我在 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>
In Chrome when I turn these settings off, it makes it round
在 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;
}
How do I change the above code permanently?
如何永久更改上述代码？
回答by Mo.
change .form-controlproperties
更改.form-control属性
.form-control{
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
回答by henrywright
I see you have:
我看到你有：
border-radius: 0px;
This makes square corners.
这使方角。
回答by Stephenmelb
Fixed it
修复
* {
-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;
}
回答by Alexander
As I understand you want your form controls to be rounded? If that is the case, you use this:
据我了解，您希望表单控件四舍五入？如果是这种情况，请使用以下命令：
.form-control {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
}
Or if you want it square, you just put 0 for values.
或者如果你想要它是方形的，你只需为值设置 0。
You can experiment on this link with the border radius: http://border-radius.com/
您可以使用边界半径在此链接上进行实验：http: //border-radius.com/
