Question

我有两个引导标签。一个左拉，另一个拉右。

请参阅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>

我想要做的是让右侧标签在移动设备上漂浮并在左侧标签上方制作。

我知道这可以通过使用推拉来实现，但是如何通过标签实现这一目标？

非常感谢您的帮助。

Answer 1

对于标签，您可以在小屏幕上包含12列宽度（即col-xs-12），在中型和大型屏幕上包含6列宽度（即col-md-6）。

这会将标签放在小屏幕上，并在大屏幕上彼此相邻。

我使用媒体查询在med和大屏幕上添加了一个正确的文本对齐方式（我不知道你是否需要它）。

请参阅下面的运行示例

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以尝试将标签放在一个div中并将div向左漂浮：

<div style = "float:left;"><label class="pull-left" for="inputText">label text one</label></div>

两个引导标签从左到右改变没有移动视图

2 个答案: