html - Bootstrap 行和文本

Question

我正在创建一个水平的表单，并希望在两列之间放置一个完整的单词，如下所示。如果我使用另一个标签，它会在这个词的两边创建过多的填充，如果我只是放入一个标签或一个没有标签包围的纯文本字符，它会破坏域框的位置。如何在不覆盖 bootstrap.css 中的样式的情况下完成这项工作？

我希望表单完全水平。

<div class="row">
        <label for="www" class="col-sm-1 control-label">
            Label1 
        </label>


    <div class="col-sm-5">
        <input type="text" class="form-control" />
    </div>

    <div class="col-sm-2">
        <input type="text" class="form-control" /> 
    </div>

    <!-- Word to go here-->

    <div class="col-sm-3">
        <button type="submit" class="btn btn-primary">go</button>
    </div>
</div>
</div>

提前致谢

Answer 1

你可以尝试遵循bootstrap的12列网格系统，为单词指定一列col-sm-1，这样所有列加起来就是12。

http://jsfiddle.net/bRh2z/show

http://jsfiddle.net/bRh2z/

    <div class="row">
    <label for="www" class="col-sm-1 control-label">Label1</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" />
    </div>
    <div class="col-sm-2">
        <input type="text" class="form-control" />
    </div>
    <div class="col-sm-1">woooord</div>
    <div class="col-sm-3">
        <button type="submit" class="btn btn-primary">go</button>
    </div>
</div>