html - 两个 Bootstrap 标签从左到右变化 没有移动 View

Question

我有两个 Bootstrap 标签。一个向左拉，另一个向右拉。

请看HTML:

<div class="form-group">
    <label class="pull-left" for="inputText">label text one</label>
    <label class="pull-right col-md-pull-6" for="inputText">label text two</label>
    <select class="form-control" id="inputText" name="inputText">
          <option value="0">Text</option>
    </select>
</div>

我想做的是让右拉标签在移动设备上向左浮动，并放在左拉标签的顶部。

我知道这可以通过使用推拉的 div 来完成，但是如何使用标签来实现呢？

非常感谢您的帮助。

Answer 1

对于标签，您可以在小屏幕上包括 12 列宽度(即 col-xs-12)，在中型和大屏幕上包括 6 列宽度(即 col -md-6).

这将使标签在小屏幕上彼此重叠，在大屏幕上彼此相邻。

我使用媒体查询在中屏幕和大屏幕上添加了右文本对齐方式(我不知道您是否需要)。

查看下面的运行示例

@media screen and (min-width: 992px) {
  label.col-md-6:nth-child(2) {
    text-align: right;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="form-group">
  <label class="text-left col-xs-12 col-md-6" for="inputText">label text one</label>
  <label class="pull-right col-xs-12 col-md-6" for="inputText">label text two</label>
  <select class="form-control" id="inputText" name="inputText">
    <option value="0">Text</option>
  </select>
</div>