Html Bootstrap 在与按钮相同的行上获取下拉菜单

Bootstrap getting dropdown on same line as buttons

提问by J.Zil

This is my code: http://jsfiddle.net/52VtD/7462/

这是我的代码：http: //jsfiddle.net/52VtD/7462/

I'm trying to put my dropdown and buttons on the same line. But I can't do that because the dropdown is a div and stays on the line below. How can I put them on the same line?

我试图将我的下拉菜单和按钮放在同一行上。但我不能这样做，因为下拉列表是一个 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>

回答by Rahul Patil

Never override or modify bootstrap base classes.. Always add new class or identity. You can do it like this :

永远不要覆盖或修改引导基类。总是添加新的类或身份。你可以这样做：

1. Add new class "div-inline" to div with class dropdown..

2. Add this css

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

1. 将新类“div-inline”添加到类为dropdown..

2. 添加这个css

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

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

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

回答by lsu_guy

As of bootstrap 4, you can change the dropdown line from:

从引导程序 4 开始，您可以从以下位置更改下拉行：

<div class="dropdown">

to:

到：

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

That will make all the buttons show up in one line.

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

回答by Harry

Add this to your CSS:

将此添加到您的 CSS：

.dropdown{
    display: inline;
}

fiddle

小提琴

回答by Guillaume

I have just one drop down button and a few "normal" buttons. I am using bootstrap and did not want to get into editing CSS, so I resolved the issue as follows. It works, it is on one line, but the above solutions will work better if you have more than one dropdown on the same line.

我只有一个下拉按钮和几个“普通”按钮。我正在使用引导程序并且不想进入编辑 CSS，所以我解决了以下问题。它有效，它在一行上，但如果同一行中有多个下拉列表，则上述解决方案会更好地工作。

I wrapped the whole thing (normal buttons and dropdown) into a <div class="row">. I then changed the <div class="dropdown>of the dropdown to <div class="dropdown col-sm-1" style="margin-right: 2%">. It did the trick.

我把整个东西（普通按钮和下拉菜单）包装成一个<div class="row">. 然后我<div class="dropdown>将下拉菜单的更改为<div class="dropdown col-sm-1" style="margin-right: 2%">。它做到了。

My code looks like this:

我的代码如下所示：

<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>