Question

我一直在努力，因为我有这种形式，在子div上有不同的输入。每当我在第一次输入之前放置开始表单标记时，换行符。如果我把它放在它之后，它会保持良好状态。我试过添加：

display:inline

到不同的班级，但它似乎没有做到这一点。

这是小提琴：https://jsfiddle.net/tL50dhcu/

任何人都可以帮我保持排队吗？

Answer 1

编辑：这是一种更简洁的方式来执行您要执行的操作：http://codepen.io/dcain19/pen/xVVyao

尝试以下示例。注意搜索输入是如何放在input-group-btn类中的。现在，您必须更改按钮上的border-radius以使右侧边框变圆，但这样可以满足您的需求。

<form method="post" class="form-horizontal" role="form" action="{% url 'search' %}">
        <div class="input-group-btn">
            <div class="btn-group" role="group">
          <input type="text" class="form-control" id="searchInput" placeholder="Search" name="search" required />

              <div class="dropdown dropdown-lg">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
                <div class="dropdown-menu dropdown-menu-right" role="menu">
                  <div class="form-group">
                    <label for="filter">Industry</label>
                    <select class="form-control" id="searchIndustry" name="industry">
                      <option value="any">Any</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="filter">Country</label>
                    <select class="form-control" id="searchCountry" name="country">
                      <option value="any">Any</option>
                    </select>
                  </div>
                </div>
              </div>
              <button type="submit" class="btn btn-primary" type="submit"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
        </form>

Answer 2

.form-horizontal {
  display: flex;
  flex-flow: row nowrap;
}

如果您创建表单flex的容器，并将其设置为nowrap

如何保持一个表格与破坏线的div？

2 个答案: