如何将引导按钮对齐到引导面板中选择选项的右侧

Question

我想按照图表将引导按钮对齐到右边.请注意我使用的是Bootstrap面板和form-horizontal:

默认情况下,按钮位于选项下方.我试过的:

<button style="float: right" type="button" id="show-contact-modal-button" class="btn btn-primary">

这会将按钮对齐但仍位于下拉列表下方.

<div class=text-right><button ...>

这实际上完全删除了按钮:-)

这是更完整的HTML:

...

<form class="form-horizontal" role="form" method="POST" action="http://host/lead">

...
<!-- Contacts -->
<div class="form-group">
    <label for="contact_id" class="col-md-2 control-label">Contact</label>
    <div class="col-md-8">
        <select name="contact_id" id="contacts-select" class="form-control" title="">
                            <option value="1"
                                >
                    Eugene van der Merwe</option>
                            <option value="2"
                                >
                    Person B</option>
                            <option value="3"
                                >
                    Person C</option>
                    </select>

        <button type="button" id="show-contact-modal-button" class="btn btn-primary">
            Add contact
        </button>

            </div>
</div>
<!-- // Contacts -->

<!-- Referrer -->
<div class="form-group">
    <label for="referrer_id" class="col-md-2 control-label">Referrer</label>
    <div class="col-md-8">
        <select name="referrer_id" id="referrers-select" class="form-control" title="">
                            <option value="1"
                                >Eugene van der Merwe</option>
                            <option value="2"
                                >Person B</option>
                            <option value="3"
                                >Person C</option>
                            <div class=text-right>
                <button style="float: right" type="button" id="show-referrer-modal-button" class="btn btn-primary">
                    Add referrer
                </button>
                </div>
        </select>



            </div>
</div>
<!-- // Referrer -->
                            <div class="form-group">
                                <div class="col-md-8 col-md-offset-2">
                                    <button type="submit" class="btn btn-primary">
                                        Create
                                    </button>
                                </div>
                            </div>
                        </form>

Answer 1

您可以利用Bootstrap input-group和input-group-addon类.然后我们只需要更新样式来处理里面的按钮.

HTML

<form class="form-horizontal" role="form" method="POST" action="http://host/lead">
    <!-- Contacts -->
    <div class="form-group">
        <label for="contact_id" class="col-md-2 control-label">Contact</label>
        <div class="col-md-8">
            <div class="input-group">
                <select name="contact_id" id="contacts-select" class="form-control" title="">
                    <option value="1">
                        Eugene van der Merwe</option>
                    <option value="2">
                        Person B</option>
                    <option value="3">
                        Person C</option>
                </select>
                <div class="input-group-addon input-group-button">
                    <button type="button" id="show-contact-modal-button" class="btn btn-primary">Add contact</button>
                </div>
            </div>
        </div>
    </div>
    <!-- // Contacts -->
    <!-- // Referrer -->
    <div class="form-group">
        <div class="col-md-8 col-md-offset-2">
            <button type="submit" class="btn btn-primary">
                Create
            </button>
        </div>
    </div>
</form>

CSS

.input-group-button {
    padding: 0 0 0 5px;
    border-color: transparent;
    background: none;
}

的jsfiddle

PS.你似乎已经把引荐text-right按钮INSIDE您选择的元素.这不会工作,应该更新

更新

如果你希望你的按钮感觉更加"附加"到选择,你必须"关闭"webkits默认border-radius覆盖.input-group .form-control的border-radius,但是然后可以做类似的事情:

CSS

.input-group-button {
    padding: 0;
    border:none;
    background: none;
}
.input-group .input-group-button:first-child .btn{
    border-top-right-radius:0;
    border-bottom-right-radius:0;
}
.input-group .input-group-button:last-child .btn{
    border-top-left-radius:0;
    border-bottom-left-radius:0;
}
.input-group select.form-control{
    -webkit-appearance: none;
}

更新了JS Fiddle

注意:这将删除浏览器添加的"箭头",因此可能不是您所追求的