Question

我需要连续有3个表单输入字段，顶部各自有标签。当行换行时，我希望标签与相应的输入一起使用并保持在顶部。我可以让标签显示在输入字段的左侧。只是不在输入之上。如何实现这一目标

Answer 1

使用列应该可以解决问题。试试这样的事情

<div class="row">
    <div class="col-xs-3">
        <label>Label 1</label>
        <input type="text" class="form-control" placeholder=".col-xs-2">
    </div>
    <div class="col-xs-3">
        <label>Label 2</label>
        <input type="text" class="form-control" placeholder=".col-xs-3">
    </div>
    <div class="col-xs-3">
        <label>Label 3</label>
        <input type="text" class="form-control" placeholder=".col-xs-4">
    </div>
</div>

Answer 2

诀窍是使用col-md-4，因为Bootstrap是在12 col网格系统上构建的。这样，在小型和超小型设备上，颜色会自动折叠成单行。这是我的笔。

http://www.bootply.com/Eb85k7lOAx
<div class="container">
<div class="row">
    <div class="col-md-4">
        <label>One</label>
        <input class="form-control" placeholder=".col-md-4" type="text">
    </div>
    <div class="col-md-4">
        <label>Two</label>
        <input class="form-control" placeholder=".col-md-4" type="text">
    </div>
    <div class="col-md-4">
        <label>Three</label>
        <input class="form-control" placeholder=".col-md-4" type="text">
    </div>
</div>
</div>

Bootstrap 3使标签保持在输入字段之上

2 个答案: