Question

我正在尝试创建一个搜索栏，其中绿色div位于灰色的中间（请参阅http://codepen.io/anon/pen/LRBEvq?editors=1100），并选中复选框，选择下拉菜单，输入字段全部内联两个按钮 - 所以一切都在同一行。我正在使用Bootstrap使其响应但却陷入困境并无法解决问题。感谢您的帮助！

这是我的HTML：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="main">
      <div class="formContainer">
        <div class="col-md-12">Lorem lorem lorem
          <div class="pull-right">Ipsum lorem ipsum</div>
        </div>
        <div class="row mainContent">
          <!-- mainContent -->
          <div class="col-md-7">
            <!-- main content -->

            <div class="checkbox">
              <span class="choice-details">
                                       <label class="checkbox-inline">
                                          <input type="checkbox" value="" checked>Lorem
                                          </label>
                                          <label class="checkbox-inline">
                                          <input type="checkbox" value="">Ipsum
                                        </label>
                                    </span>
            </div>
            <div class="choice-select">
              <select class="form-control">
                                    <option value="one">One</option>
                                    <option value="two">Two</option>
                                    <option value="three">Three</option>
                                    <option value="four">Four</option>
                                    <option value="five">Five</option>
                                </select>
            </div>
            <div class="choice-input">
              <input type="text" placeholder="Placeholder text">
            </div>


          </div>
          <div class="col-md-5">
            <button>Lorem ipsum lorem</button>
            <button>Lorem lorem lorem</button>
          </div>
          <!-- end main content -->
        </div>
        <!-- end mainContent -->
      </div>
    </div>
  </div>

这是我的css：

.main {
    background-color: grey;
    width: 1202px;
    height: 156px;
    margin: 0 auto;
}

.formContainer {
    width: 1140px;
    height: 85px;
    background-color: green;
}

button {
    height: 37px;
    width: 160px;
}

.choice {
    background-color: lightgrey;
    height: 37px;
}

.checkbox {
    width: 207px;
    border: 1px solid white;
}

.choice-select {
    width: 173px;
}

.choice-input {
    width: 390px;
}

Answer 1

您需要来自表单标记的bootstrap中的类.form-inline。以下是一个例子：

<body>
  <div class="container">
    <div class="main">
      <div class="formContainer">
        <div class="col-md-12">Lorem lorem lorem
          <div class="pull-right">Ipsum lorem ipsum</div>
        </div>
        <div class="row mainContent">
          <!-- mainContent -->
          <div class="col-md-7 form-inline">
            <!-- main content -->

            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">Name</label>
                    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail2">Email</label>
                    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
                </div>
                <button type="submit" class="btn btn-default">Send invitation</button>
            </form>

          </div>
          <div class="col-md-5">
            <button class="btn btn-primary">Lorem ipsum lorem</button>
            <button class="btn btn-success">Lorem lorem lorem</button>
          </div>
          <!-- end main content -->
        </div>
        <!-- end mainContent -->
      </div>
    </div>
  </div>

如果您将表单的每个输入都设为一个单独的div .form-group并且所有内容都在.form-inline内，则会生成内联表单。

来源：Bootstrap Documentation

在搜索栏中嵌入复选框和输入字段

1 个答案: