Question

我的页面顶部有一行有四个元素。 2个按钮，1个下拉菜单和1个输入字段。前三个元素位于一个列div中，输入字段位于一个单独的列中。

两列之间存在很大差距，我认为可能是下拉列表被推下一行的原因？我需要帮助才能在按钮旁边显示下拉列表。

<div class="row" style="padding-top: 15px;">
    <div class="col-md-8">
        <div class="form-group form-horizontal">
            <button class="btn btn-success" style="font-size: 22px;">
                Add New Project
                <span class="ion ion-plus-circled"></span>
            </button>
            <button class="btn btn-danger" style="font-size: 22px;">
                Delete Project
                <span class="ion ion-trash-a"></span>
            </button>
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle"
                        style="font-size: 22px;"
                        type="button" id="filter-dropdown" 
                        data-toggle="dropdown" 
                        aria-haspopup="true" 
                        aria-expanded="true">
                    Search By Status <span class="caret"></span>
                </button>
                <!-- List body handled in content-controller.js -->
                <ul class="dropdown-menu" aria-labelledby="filter-dropdown"> 
                    <li id="filter-na"></li>
                    <li id="filter-ontrack"></li>
                    <li id="filter-done"></li>
                    <li id="filter-issues"></li>
                    <li id="filter-behind"></li>
                    <li id="filter-abandoned"></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group form-horizontal">
            <input type="text" class="form-control"
                   style="font-size: 22px;"
                   placeholder="Search" 
                   name="srch-field" id="srch-field">
        </div>
    </div>
</div>

如果您感到好奇，以下是将元素放入下拉列表中的代码：

function CreateFilterDropdown() {
    var na_filter = $('#filter-na');
    var ontrack_filter = $('#filter-ontrack');
    var done_filter = $('#filter-done');
    var issues_filter = $('#filter-issues');
    var behind_filter = $('#filter-behind');
    var abandoned_filter = $('#filter-abandoned');

    na_filter.append('<button class="btn status-circle" ' + 
            'style="background-color: ' + GetColumnColor('NA') + ';" disabled>' +
            '</button>');
    ontrack_filter.append('<button class="btn status-circle" ' + 
            'style="background-color: ' + GetColumnColor('ON_TRACK') + ';" disabled>' +
            '</button> On Track');
    done_filter.append('<button class="btn status-circle" ' +
            'style="background-color: ' + GetColumnColor('DONE') + ';" disabled>' + 
            '</button> Done');
    issues_filter.append('<button class="btn status-circle"' + 
            'style="background-color: ' + GetColumnColor('ISSUE') + ';" disabled>' + 
            '</button> Issue');
    behind_filter.append('<button class="btn status-circle"' +
            'style="background-color: ' + GetColumnColor('BEHIND') + ';" disabled>' + 
            '</button> Behind');
    abandoned_filter.append('<button class="btn status-circle"' +
            'style="background-color: ' + GetColumnColor('ABANDONED') + ';" disabled>' + 
            '</button> Abandoned');
}

Answer 1

将display: inline-block;添加到您的下拉列表中。

<div class="dropdown" style="display:inline-block;">

JsFiddle Example

Answer 2

您必须添加CSS样式=＆＃34; display：inline-block;＆＃34;或者在章节中添加左拉类

<div class="dropdown" style="display:inline-block;">

（或）

<div class="dropdown pull-left">

Answer 3

您是否尝试过添加float：left;你的专栏div？

<div class="col-md-8" style="float:left;">
<div class="col-md-4" style="float:left;">

等 - 它在JSf中对我有用 - 不确定它是否是最佳实践：）

div不会与bootstrap中的按钮对齐

3 个答案: