Question

我的目的是对齐描述和一些代表对象描述的文本。所以在我的页面中我希望：

描述:(文字）（以这种方式对齐）

所以我的HTML代码是：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group row">
  <label class="col-xs-1 col-form-label">Description:</label>
  <div class="col-xs-3">
    <label>ddddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaa
    ddddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaa
    ddddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaa
    ddddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaa
    ddddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaa</label>
  </div>
</div>

在这种情况下，代码工作正常，因为它使我的描述符合我的要求。但是如果字符串很像这个“sdfsdf”，那么结果就会大不相同，因为描述和字符串是一个在另一个之上。有人可以帮帮我吗？

Answer 1

我无法重现您的错误。我唯一看到的是两个字符串在小屏幕上重叠，可以使用更大的列值进行修复：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group row">
  <label class="col-sm-1 col-xs-3 col-form-label">Description:</label>
  <div class="col-sm-3 col-xs-4">
    <label>ddddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaa
    ddddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaa
    ddddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaa
    ddddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaa
    ddddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaa</label>
  </div>
</div>

Answer 2

尝试这种方式：

<div class="row">
  <div class="col-xs-6">
    <div class="form-group">
      <label for="username">Username</label>
      <input type="text" class="form-control" name="username" id="username" />
    </div>
  </div>
</div>

在我的例子中，我使用了虚构的字段名称和列宽。您可以根据自己的需要进行调整！

在这里摆弄2个输入字段：https://jsfiddle.net/mypp9s38/

这是标签描述的另一个小提琴。描述可以是任何大小：https://jsfiddle.net/mypp9s38/1/

当字符串很小时，col-xs不起作用

2 个答案: