How to set margin between input tags in bootstrap?

Question

I have two input elements on my page. I need to give margin between the two elements.

<input type="text" class="form-control" placeholder="Username">
<input type="password" class="form-control" placeholder="password">

I have created a class for assigning margin for the password input. I would like to know if there are better ways to do this? Perhaps by wrapping the two input tags with divs?

Answer 1

如果您使用的是Bootstrap，正确的方法是这样做：

<div class="form-group">
  <input type="text" class="form-control" id="Username" placeholder="Username">
</div>
<div class="form-group">
  <input type="password" class="form-control" id="Password" placeholder="Password">
</div>

如果您只想在它们之间添加空格，请转到：

.space-right {
  margin-right: 10px;
}

<input type="text" class="form-control space-right" placeholder="Username" />
<input type="password" class="form-control" placeholder="password" />

Answer 2

您可以使用此代码：

.form-control {
  margin:0 5px; // for left and right margin
  margin:5px 0; // form top and bottom margin
 }