html - 如何将 Bootstrap 按钮对齐到 Bootstrap 面板中选择选项的右侧

Question

我想按照图表将 Bootstrap 按钮右对齐。请注意我正在使用 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

附言。您似乎已将 Referrer text-right 按钮放置在 INSIDE 您的选择元素中。这行不通，应该更新

更新

如果你想让你的按钮感觉更“依附”到选择上，你必须“关闭”webkit 默认的 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;
}

Updated JS Fiddle

注意:这将删除浏览器添加的“箭头”，因此可能不是您想要的