Question

我正在尝试并排显示dropdown和input，如下图所示。

我尝试过内联表单和输入组，但我见过的所有示例都显示了static text与span和input控件并排的对齐

到目前为止，以下是我尝试的内容

<div class="form-inline">
  <div class="form-group">
    <select class="form-control" id="phonetype">
                <option value="">Select Phone Type</option>
                <option value="Passport">Mobile Phone</option>
                <option value="SSN">Work Phone</option>
              </select>
    <input class="form-control" id="phone" name="phone" type="text" placeholder="">
  </div>
</div>

JSBin

Answer 1

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group">
<div class="">
  <div class="form-inline">
    <div class="form-group col-xs-6">
      <select class="form-control" id="phonetype">
                  <option value="">Select Phone Type</option>
                  <option value="Passport">Mobile Phone</option>
                  <option value="SSN">Work Phone</option>
                </select>
                </div>
                <div class="form-group col-xs-6">
      <input class="form-control" id="phone" name="phone" type="text" placeholder="">
    </div>
  </div>
  </div>
 </div>

＆＃13;

Answer 2

尝试类似的东西：

  <div class="container">
  <div class="row">
    <div class="form-inline">
      <div class="form-group navbar navbar">
        <select class="form-control nav navbar-nav navbar-static-top" id="phonetype">
          <option value="">Select Phone Type</option>
          <option value="Passport">Mobile Phone</option>
          <option value="SSN">Work Phone</option>
        </select>
        <input class="form-control nav navbar-nav navbar-static-top" id="phone" name="phone" type="text" placeholder="">
      </div>
    </div>
  </div>
</div>

它产生了这个：

Screen

引导选择和文本框并排

2 个答案: