Question

Airbnb在他们的网站上有一个整洁的形式，有三个内联控件：

我试图复制这个，但是我的表单似乎没有形成，尽管使用了Bootstrap列。

我的代码是

<div className="btn-group btn-group-justified" role="group" aria-label="...">
  <div className="col-md-3 col-xs-12 col-sm-12">
    <Geosuggest
      fixtures={fixtures}
      inputClassName="form-control"
      onFocus={() => this.onFocus()}
      onBlur={(value) => this.onBlur(value)}
      onChange={(value) => this.onChange(value)}
      onSuggestSelect={(suggest) => this.onSuggestSelect(suggest)}
      location={new google.maps.LatLng(53.558572, 9.9278215)}
      radius="20"
    />
  </div>
  <div className="col-md-3 col-xs-12 col-sm-12">
    <DateRangePicker
      {...this.props}
      onDatesChange={this.onDatesChange}
      onFocusChange={this.onFocusChange}
      startDatePlaceholderText='Llegada'
      endDatePlaceholderText='Salida'
      focusedInput={focusedInput}
      startDate={startDate}
      endDate={endDate}
      minimumNights={0}
      className="form-control"
    />
  </div>
  <div className="col-md-3 col-xs-12 col-sm-12">
    <select className="form-control" id="sel1">
      <option>1 persona</option>
      <option>2 personas</option>
    </select>
  </div>
  <div className="col-md-3 col-xs-12 col-sm-12">
    <button className="btn btn-default">Buscar</button>
  </div>
</div>

Answer 1

您需要将元素包装在特定列中，如下所示：

<div class="container">
    <form class="form-horizontal">
        <div class="form-group">
            <div class="row">
                <label class="col-sm-4">Options</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" placeholder="Search" />
                </div>
                <div class="col-sm-2">
                    <select class="form-control">
                        <option>Option 1</option>
                        <option>Option 2</option>
                    </select>
                </div>
                <div class="col-sm-2">
                    <select class="form-control">
                        <option>Option 1</option>
                        <option>Option 2</option>
                    </select>
                </div>
                <div class="col-sm-2">
                    <input type="submit" class="btn" value="Submit" />
                </div>
            </div>
        </div>
    </form>
</div>

现在，为不同的视口调整这些大小没有什么坏处，但是建议在使用这种.horizontal-form将.form-control包装在嵌套的div时，但{ {1}}本身。

我还建议在标签上添加label左右。它使它在中心对齐。

Bootstrap中的内联水平表单

1 个答案: