twitter-bootstrap 我可以使用引导程序为表单添加边框吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44031111/
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
Can i put border to a form using bootstrap?
提问by Catarina Nogueira
I have this code below, and i want to add a border to make like a box using bootstrap class ".border", but i can't figure out why is not working!. Is possible using bootstrap v4?
我在下面有这个代码，我想使用引导程序类“.border”添加一个边框，使其像一个盒子，但我不知道为什么不起作用！。是否可以使用引导程序 v4？
<div class="d-flex justify-content-center">
<form>
<div class="form-group row">
<div class="col-sm-12">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class=" col-sm-12">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
</div>
采纳答案by Nishesh Pratap
Yup you can put a border around your form. You can achieve that by using inline CSS as shown below :
是的，您可以在表单周围放置边框。您可以通过使用内联 CSS 来实现，如下所示：
<form style="border:1px solid black">
<form style="border:1px solid black">
回答by varman
yes you can.
是的你可以。
if you use internal style sheet
如果您使用内部样式表
<head>
<style>
.border-class
{
border:thin black solid;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="d-flex justify-content-center ">
<form class="border-class">
<div class="form-group row">
<div class="col-sm-12">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class=" col-sm-12">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
</div>
</body>
回答by mr.cavus
add "well" tag to your outer div element
将“well”标签添加到您的外部 div 元素
Ex : < div class="col-lg-6 col-md-6 col-sm-12 well" >
例如：<div class="col-lg-6 col-md-6 col-sm-12 well" >
回答by MazeOfEncryption
I know this is a very late response, but I feel obligated to share a more "bootstrap" way of doing this. Simply use the classes cardand p-1for a border and padding between your content and said border.
我知道这是一个很晚的回应，但我觉得有必要分享一种更“引导”的方式来做到这一点。只需将类card和p-1用于您的内容和所述边框之间的边框和填充。
<form class = 'card p-1'>
回答by Bhavin Shah
.b {
border:thin black solid;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="d-flex justify-content-center ">
<form class="b">
<div class="form-group row">
<div class="col-sm-12">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class=" col-sm-12">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
</div>Something like this?
像这样的东西？
Hope this helps.
希望这可以帮助。
回答by Yassir
Here is a pretty good combination for a bordered form with background color:
这是带有背景颜色的边框表单的一个很好的组合：
<form class = 'card p-3 bg-light'>
Looked good for my case.
看起来很适合我的情况。
