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

debugcn 发表于 Dev

尤金·范德·默威

我想按照图示将引导程序按钮对齐到右侧。请注意，我正在使用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>

哈克斯顿

您可以利用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您选择的元素。这将无法正常工作，应进行更新

更新

如果您希望按钮对选择更具“依附感”，则必须“关闭”border-radius覆盖.input-group .form-control的默认Webkit默认值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小提琴

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。