css - Bootstrap 移动内联表单

Question

我正在使用 Bootstrap 。我想在移动 elm1、elm2 和 elm3 中显示一个并排显示(如内联)。看下面的代码:

<div class="container-fluid">

<div class="form-group">
                  <label class="control-label col-sm-5 elm0" for="email">Date:</label>
                  <div class="col-sm-2 elm1">
                    <select class="form-control">
                        <option>1</option>
                        ....
                        <option>12</option>
                    </select>
                    </div>
                    <div class="col-sm-1 elm2">/</div>
                    <div class="col-sm-4 elm3">
                    <select class="form-control">
                        <option>2015</option>
                        ....
                        <option>2035</option>
                    </select>
                    </div>
                </div>
</div>

然而，在移动分辨率中，这三个元素一个接一个地出现。如果我用 col-xs-.. 而不是 col-sm-.. elm0 显示不好。

我能做什么？

Answer 1

您可以删除 Bootstrap 类，只需将以下规则添加到您的 CSS

.elm0,.elm1,.elm2,.elm3{
    display:inline-block;
}

片段

.elm0,
.elm1,
.elm2,
.elm3 {
  display: inline-block;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container-fluid">

  <div class="form-group">
    <label class="control-label elm0" for="email">Date:</label>
    <div class="elm1">
      <select class="form-control">
        <option>1</option>
        ....
        <option>12</option>
      </select>
    </div>
    <div class="elm2">/</div>
    <div class="elm3">
      <select class="form-control">
        <option>2015</option>
        ....
        <option>2035</option>
      </select>
    </div>
  </div>
</div>