2个按钮彼此相邻且具有不同的div

Question

我想将“查看”按钮放在左侧，将“添加”按钮放在右侧，但彼此相邻。 2个按钮位于不同的div中。我该怎么办？

演示

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="btn-group" id="divNewNotificationsRole-admin">
    <button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View</button>
    <div id="myDropdown" class="dropdown-menu">
      <li><a id="dropdown1" class="dropdown-item" href="#">1</a></li>
      <li><a id="dropdown2" class="dropdown-item" href="#">2</a></li>
    </div>
  </div>
</div>
<div id="rolecontainer" class="container">
  <div id="addContainer" align="right">
    <button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
  </div>
</div>

Answer 1

最简单的方法是将float: left;添加到第一个按钮容器中。

.btn-group {
  float: left;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">

  <div class="btn-group" id="divNewNotificationsRole-admin">
    <button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View</button>
    <div id="myDropdown" class="dropdown-menu">
      <li><a id="dropdown1" class="dropdown-item" href="#">1</a></li>
      <li><a id="dropdown2" class="dropdown-item" href="#">2</a></li>
    </div>
  </div>

  <div id="rolecontainer" class="container">
    <div id="addContainer" align="right">
      <button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
    </div>
  </div>
  
</div>

Answer 2

您可以将两个按钮都放在同一个div中，并使用引导程序类“ left”和“ right”：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="btn-group" id="divNewNotificationsRole-admin">
    
    <div id="myDropdown" class="dropdown-menu">
      <li><a id="dropdown1" class="dropdown-item" href="#">1</a></li>
      <li><a id="dropdown2" class="dropdown-item" href="#">2</a></li>
    </div>
  </div>
</div>
<div id="rolecontainer" class="container">
    <button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split left" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View</button>
  
    <button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning right">Add</button>
  </div>
 

Answer 3

您可以使用引导行和列类来避免各种分辨率问题。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<div class="container">

<div class="row">
    <div class="col-xs-12 col-sm-1 col-md-1 clo-lg-1">
        <div class="btn-group" id="divNewNotificationsRole-admin">
            <button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                View</button>
            <div id="myDropdown" class="dropdown-menu">
                <li><a id="dropdown1" class="dropdown-item" href="#">1</a></li>
                <li><a id="dropdown2" class="dropdown-item" href="#">2</a></li>
            </div>
        </div> 
    </div>
    <div class="col-xs-12 col-sm-1 col-md-1 clo-lg-1">
        <div id="rolecontainer">
            <div id="addContainer">  
                <button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>  
            </div>
        </div>
    </div>
</div>

Answer 4

对此的一种更好的做法是CSS包含按钮的两个父div都带有

.div1, .div2 {
display: inline-block;
}

具有此功能将它们插入行内。