Question

我检查了其他解决方案，但似乎没有任何效果。我尝试了宽度：200px 但仍然是同样的问题。我的表单很旧，所以我想把它改成bootstrap版本。其他人，使用输入组时有1px差异。对我来说更大。
我会在这里留下表格，也许会对我有用。

.form-control{
  margin-top:10px;
  margin-bottom: 10px;
}
label{
  color:#03A0D3;
  font-size: 15px;
  margin-right:10px;
}

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<form id="updatesettings" method="post">

  <label for="link">WEBSITE LINK</label>
  <div class="input-group">
    <input type="text" name="link" class="form-control" placeholder="LINK">
    <span class="input-group-addon"><span class="fa fa-check green"></span></span>
  </div>

  <label for="email">E-MAIL</label>
  <div class="input-group">
    <input type="text" name="email" class="form-control" placeholder="E-MAIL">
    <span class="input-group-addon"><i class="fa fa-check green"></i></span>
  </div>

  <div class="btn-group">
    <a class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#">English><span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#"><span class="flag flag-usa flag-1x"></span> English</a></li>
      <li><a href="#"><span class="flag flag-rou flag-1x"></span> Romana</a></li>
    </ul>
  </div>
  <button type="submit" class="btn btn-primary">Save</button>
</form>

如果我尝试在输入和表单的其他元素之间添加一些边距，则它无效。我想让标签靠近输入，标签顶部保持10px的余量。

Answer 1

将边距提供给class="input-group" ..而不是form control class。这打破了布局。

工作示例

.input-group{
  margin-top: 10px;
  margin-bottom: 10px;
}
label{
  color:#03A0D3;
  font-size: 15px;
  margin-right:10px;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <form id="updatesettings" method="post">

              <label for="link">WEBSITE LINK</label>
              <div class="input-group">
              <input type="text" name="link" class="form-control" placeholder="LINK">
              <span class="input-group-addon" id="ln"><i  class="fa fa-times red"></i></span>
             
            </div>

              <label for="email">E-MAIL</label>
              <div class="input-group">
              <input type="text" name="email" class="form-control" placeholder="E-MAIL">
              <span class="input-group-addon"><i class="fa fa-check green"></i></span>
             </div>

            <div class="btn-group">
              <a class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#">English><span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#"><span class="flag flag-usa flag-1x"></span> English</a></li>
                <li><a href="#"><span class="flag flag-rou flag-1x"></span> Romana</a></li>
              </ul>
            </div>
		       <button type="submit" class="btn btn-primary">Save</button>
		      </form>

Bootstrap输入组问题

1 个答案: