Question

这是渲染（在chrome中）http://i.imgur.com/aQS5j5r.png

的方式

我希望做两件事：

让我的公司下拉标签像其他标签一样移到顶部，然后将搜索框和公司下拉列表与其他字段内联。

这不是空间问题（或者至少我认为不是）。如果我删除公司下拉列表和联系人姓名之外的所有表单元素，我会得到相同的行为。

生成的代码：

<form action="/TicketViewer" method="post" class="form-inline">
    <div class="form-group">
        <label for="inquiryID">Inquiry ID</label>
        <input type="text" class="form-control" id="inquiryID" name="inquiryID" placeholder="e.g. 7-2931">
    </div>
    <div class="form-group">
        <label for="contactName">Contact Name</label>
        <input type="text" class="form-control" id="contactName" name="contactName" placeholder="e.g. gavin (case insensitive) ">
    </div>
    <div class="form-group">
        <label for="searchKeyword">Search Keyword</label>
        <input type="text" class="form-control" id="searchKeyword" name="searchKeyword" placeholder="e.g. added mailbox (case insensitive)">
    </div>
    <div class="form-group">
        <label for="selectedCompany">Company</label>
        <select class="form-control" id="SelectedCompany" name="SelectedCompany"><option value=""></option>
<option>SNIPPED</option>
</select>
    </div>
    <div class="form-group">
        <label for="sel1">Engineer</label>
        <select class="form-control" id="engineer" name="engineer">
            <option value="" default selected>All Engineers</option>
            <option>REDACTED LIST/option>
        </select>
    </div>
    <button type="submit" class="btn btn-default">Search</button>
</form>

Answer 1

也许最好使用bootstrap网格布局来显示表单： http://getbootstrap.com/css/#grid 您可以使用嵌套网格实现此布局。这是一个例子

<div class="col-sm-3">
   <div class="row">
      <div class="col-sm-12">text</div>
   </div>
   <div class="row">
      <div class="col-sm-12">textbox</div>
   </div>
</div>

Bootstrap内联形式一个元素将标签推向左侧

1 个答案: