Html 如何使用引导程序在 div 周围创建圆角边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26050027/
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
How to create a rounded border around a div with bootstrap?
提问by g.pickardou
I am using bootstrap 3. The input type=text elements are cool. Now I would like to create a similar rounded border around a div element. Anything I've tried seems ugly, Is it possible with bootstrap 3?
我正在使用引导程序 3。输入 type=text 元素很酷。现在我想在 div 元素周围创建一个类似的圆形边框。我尝试过的任何东西看起来都很丑陋，Bootstrap 3 有可能吗？
Thanks in advance
提前致谢
回答by James Lawruk
To quickly make a div look like a Bootstrap input, simply add a .form-controlclass to your div.
要快速使 div 看起来像 Bootstrap 输入，只需.form-control向 div添加一个类。
<div class="form-control">I am inside a div.</div>
Also check out Bootstrap Panels. Since divs are not form controls, panals have rounded corners and are more appropriate for divs.
另请查看Bootstrap 面板。由于 div 不是表单控件，panals 有圆角，更适合 div。
<div class="panel panel-default">
<div class="panel-body">I am inside a panel.</div>
</div>
回答by Shawn Taylor
Since you're trying to emulate a bootstrap input, @James Lawruk's suggestion of using .form-controlis the quickest simplest way to do it.
由于您正在尝试模拟引导程序输入，@James Lawruk 建议使用 . form-control是最快最简单的方法。
But if you want to learn how to emulate styling you see elsewhere (which you should), you need to inspect the css used in .form-control (if on Chrome, right-click and "inspect element"), copy the relevant styling, and create your own class to apply.
但是如果你想学习如何模拟你在别处看到的样式（你应该这样做），你需要检查 .form-control 中使用的 css（如果在 Chrome 上，右键单击并“检查元素”），复制相关样式，并创建自己的类来申请。
In this case:
在这种情况下：
.form-control{
display: block;
width: 100%; /* THIS */
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555; /* THIS */
background-color: #fff;
background-image: none;
border: 1px solid #ccc; /* THIS */
border-radius: 4px; /* THIS */
}
becomes
变成
.custom{
width: 100%;
color: #555;
border: 1px solid #ccc;
border-radius: 4px;
}
NOTE: I am ignoring a few pseudo-classes also attached to .form-control, like :focus, but pseudo-elements are a another reason you might not want to apply a class that was designed for another purpose.
注意：我忽略了一些也附加到 .form-control 的伪类，例如 :focus，但伪元素是您可能不想应用专为其他目的而设计的类的另一个原因。
