Question

我想使用bootstrap 4水平形式删除表单控件之间的所有额外间距，以使其更紧凑和更小。我添加了下面的css，删除了一些间距，但标签和输入之间的间距仍然存在，我无法弄清楚如何删除它。

.form-group {
  margin-top: 0;
  margin-bottom: 0;
}

http://www.dnnsoftware.com/wiki/dotnetnuke-skins

Answer 1

使用!important来阻止覆盖：

.form-group {
   margin-bottom: 0px!important;
}

或使用bootstrap 4间距：https://getbootstrap.com/docs/4.0/utilities/spacing/

<div class="form-group mb-0">

例如：

＆＃13;

.space .form-group {
 margin-bottom: 0px!important; 
 }

＆＃13;

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form action="/action_page.php">
<h1>Without space</h1>
<div class="space">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-grou">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
    </div>
    </div>
<h1>With space</h1>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
    </div>
  </form>

＆＃13;

Answer 2

Bootstrap在margin-bottom类上设置默认.form-group：

默认情况下，它仅应用margin-bottom

https://getbootstrap.com/docs/4.1/components/forms/#form-groups

如果您使用预编译的引导程序，只需使用更强的选择器（也称为cascading）覆盖它。

如果您自己编译bootstrap，只需将$form-group-margin-bottom变量设置为您想要的任何值（例如0）。

Answer 3

我通过添加

解决了这个问题

label {
margin-bottom: 0;
}

现在工作正常。

减少bootstrap水平表单控件之间的间距

3 个答案: