如何水平空间引导表单

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 类应用于表单标签，以便 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 应用于表单标签的所有元素。

CSS

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

此 CSS 适用于表单的所有直接子元素。