Question

我＆＃39;我使用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;
}

<强>段

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

但最好使用bootstrap类和属性。这是示例http://getbootstrap.com/css/#forms 在form http://prntscr.com/6okd0g

上添加此课程

Bootstrap移动内联表单

2 个答案: