Question

我的代码如下。如何使按钮符合输入？现在按钮与相邻列内联，看起来很丑陋。现场演示here

<div class="row">
    <div class="col-md-3">
        <div class="form-group">
            <label for="x" class="control-label">Function</label>
            <input type="text" id="x" class="form-control" placeholder="x"/>
        </div>                                  
    </div>
    <div class="col-md-1">
        <a href="#" id="ok" class="btn btn-success">Get</a>
    </div>
    <div class="col-md-1">
        <a href="#" id="stat" class="btn btn-primary">Stat</a>
    </div>
</div>

Answer 1

你可以使用一个输入组（虽然bootstrap说你不应该使用带有选择的输入组，因为它并不总是表现）

http://getbootstrap.com/components/#input-groups-buttons

编辑：输入组上方的标签：

<div class="container" style="width: 600px;">
    <form id="form" role="form">
        <div class="row">
            <label for="x" class="control-label">Function</label>
            <div class="input-group">  
                <select id="x" class="form-control" placeholder="x">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                </select>                   
                <span class="input-group-btn">
                    <a href="#" id="ok" class="btn btn-success">Get</a>
                    <a href="#" id="stat" class="btn btn-primary">Stat</a>
                </span>
            </div>
        </div>
    </form>
</div>

或作为输入组的一部分的标签：

<div class="container" style="width: 600px;">
    <form id="form" role="form">
        <div class="row">
            <div class="input-group">  
                <span class="input-group-addon"><label for="x" class="control-label">Function</label></span>
                <select id="x" class="form-control" placeholder="x">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                </select>                   
                <span class="input-group-btn">
                    <a href="#" id="ok" class="btn btn-success">Get</a>
                    <a href="#" id="stat" class="btn btn-primary">Stat</a>
                </span>
            </div>
        </div>
    </form>
</div>

我在你的小提琴上添加了一个更新：

在群组上方输入：http://jsfiddle.net/ced7k0hq/11/

作为群组的一部分输入：http://jsfiddle.net/ced7k0hq/12/

来自bootstrap文档：http://getbootstrap.com/components/#input-groups

仅文字<input> 避免在此使用<select>元素，因为它们无法在WebKit浏览器中完全设置样式。

避免在此处使用<textarea>元素，因为在某些情况下，不会尊重其行属性。

感谢@ovitinho关于加入单个input-group-btn中的两个锚点的评论：D

Bootstrap - 按钮内联输入，带有上面的标签

1 个答案: