Question

我正在尝试将我的下拉列表和按钮放在同一行。但是我不能这样做因为下拉是一个div并且保持在下面的线上。我怎么能把它们放在同一条线上？

<div class="panel panel-default">
  <div class="panel-heading">
    <input type="checkbox">
    <button type="submit" class="btn btn-xs btn-default">Stage</button>
    <button type="submit" class="btn btn-xs btn-default">Add Label</button>
    <button type="submit" class="btn btn-xs btn-default">Send Message</button>
    <button type="submit" class="btn btn-xs btn-default">Archive</button>

    <div class="dropdown">
      <button class="btn btn-xs btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
         Assign to<span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Unsorted <span class="badge">12</span></a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action <span class="badge">42</span></a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here <span class="badge">42</span></a></li>
      </ul>
    </div>

 </div>
Test
</div>

Answer 1

永远不要覆盖或修改引导程序基类。始终添加新类或标识。你可以这样做：

将新的“div-inline”类添加到带有dropdown类的div ..

添加此css

.div-inline{
    display:inline-block;
}

JSFIddle：http://jsfiddle.net/rahulrulez/52VtD/7464/

Answer 2

从bootstrap 4开始，您可以更改下拉线：

<div class="dropdown">

为：

<div class="dropdown d-inline-block">

这将使所有按钮显示在一行中。

Answer 3

将此添加到您的CSS：

.dropdown{
    display: inline;
}

fiddle

Answer 4

我只有一个下拉按钮和一些“普通”按钮。我正在使用bootstrap并且不想进入编辑CSS，因此我解决了以下问题。它有效，它在一条线上，但如果您在同一条线上有多个下拉列表，上述解决方案将更好地工作。

我将整个事物（普通按钮和下拉列表）包裹到<div class="row">中。然后，我将下拉列表的<div class="dropdown>更改为<div class="dropdown col-sm-1" style="margin-right: 2%">。它成功了。

我的代码如下所示：

<div class="row">
<spring:url value="/person/${person.id}/addaddress" var="addaddressUrl" />
<button class="btn btn-info"
    onclick="location.href='${addaddressUrl}'">Add Address</button>

<spring:url value="/person/${person.id}/addphone" var="addphoneUrl" />
<button class="btn btn-primary"
    onclick="location.href='${addphoneUrl}'">Add Phone</button>

<spring:url value="/person/${person.id}/addemail" var="addemailUrl" />
<button class="btn btn-success"
    onclick="location.href='${addemailUrl}'">Add Email</button>

<spring:url value="/person/${person.id}/addpass" var="addpassUrl" />
<button class="btn btn-default"
    onclick="location.href='${addpassUrl}'">Add Pass</button>

<spring:url value="/person/${person.id}/addnote" var="addnoteUrl" />
<button class="btn btn-warning"
    onclick="location.href='${addnoteUrl}'">Add Note</button>

<div class="dropdown col-sm-1" style="margin-right: 2%">

    <spring:url value="/person/${person.id}/role1" var="role1Url" />
    <spring:url value="/person/${person.id}/role2" var="role2Url" />
    <spring:url value="/person/${person.id}/role3" var="role3Url" />
    <spring:url value="/person/${person.id}/role4" var="role4Url" />
    <spring:url value="/person/${person.id}/role5" var="role5Url" />
    <spring:url value="/person/${person.id}/role6" var="role6Url" />

    <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown"
    >Add Role
        <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="${role1Url}">role1</a></li>
        <li><a href="${role2Url}">role2</a></li>
        <li><a href="${role3Url}">role3</a></li>
        <li><a href="${role4Url}">role4</a></li>
        <li><a href="${role5Url}">role5</a></li>
        <li><a href="${role6Url}">role6</a></li>
    </ul>
</div>

Bootstrap与按钮在同一行上下拉列表

4 个答案: