如何水平空间引导形式

Question

以下是我的django过滤器表单的外观：

​

​

我需要水平空间他们一点点，这样‘名称包含’和搜索栏，和‘结果’等不粘在一起。

以下是我的html代码：

  <form action="" method="get" class="form-inline text-white justify-content-center mx-3">
       {{myfilter.form|bootstrap}}

     <button class="btn btn-primary" type="submit">
       Search</button>

  </form>

我尝试过添加m-3、mx-3等，但是它们不起作用。很少的帮助会被感激的。谢谢!

Answer 1

首先，我必须解释一下，您将m-3或mx-3类应用于form标记，这样mx-3只给表单选项卡留出了边距，而Name contains、search bar和result等是表单的子元素。

因此，如果将mx-3类添加到特定元素中，则它将工作。

现在，解决问题的方法应该是：

如果将class="mx-3"放到每个表单元素中。

或者，您必须按以下方式应用CSS。

HTML

<form action="" method="get" class="weekly_calls_form form-inline text-white justify-content-center">
  {{myfilter.form|bootstrap}}
  <button class="btn btn-primary" type="submit">Search</button>
</form>

我已经将我的自定义类添加到名为weekly_calls_form的表单标记中。

现在，使用这个类，我将CSS应用于form标记的所有元素。

CSS

.weekly_calls_form > *{
  margin: 0px 5px;
}

此CSS适用于窗体的所有直接子元素。