带输入组的引导面板

Question

我想要做的是有一个引导面板，它的左侧有一个按钮，右侧有一个按钮。有点像输入组，我希望这是有道理的。

打扰我的油漆技巧，但我想我会附上我的意思的例子。

的面板可能不使用最好的事情，因此，如果有任何其他建议随时让我知道。

感谢

Answer 1

好感谢所有输入我想我已经找到了解决办法是什么我后

这里是CSS

.panel.panel-horizontal { 
     display: table; 
     width: 100%; 
    } 

     .panel.panel-horizontal > .panel-heading, .panel.panel-horizontal > .panel-body, .panel.panel-horizontal > .panel-footer { 
      display: table-cell; 
     } 

     .panel.panel-horizontal > .panel-heading, .panel.panel-horizontal > .panel-footer { 
      border: 0; 
      vertical-align: middle; 
     } 

     .panel.panel-horizontal > .panel-heading { 
      border-right: 1px solid #ddd; 
      border-top-right-radius: 0; 
      border-bottom-left-radius: 4px; 
     } 

     .panel.panel-horizontal > .panel-footer { 
      border-left: 1px solid #ddd; 
      border-top-left-radius: 0; 
      border-bottom-right-radius: 4px; 
     } 

这里是HTML

<div class="panel panel-default panel-horizontal"> 
      <div class="panel-heading"> 
       <button class="btn btn-success" type="button"><span class="fa fa-check"></span></button> 
      </div> 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque saepe iusto nulla molestias quis esse incidunt veritatis exercitationem dolore officiis. Nam quos iusto officiis ullam itaque voluptatum fuga assumenda culpa!</div> 
      <div class="panel-footer"> 
       <button class="btn btn-danger" type="button"><span class="fa fa-flag"></span></button> 
      </div> 
     </div> 

我可以通过使页眉和页脚成为纯色来进一步改善这一点。

Answer 2

试试这个code

<div class="row"> 
    <div class="col-lg-offset-3 col-lg-6"> 
    <div class="input-group"> 
     <span class="input-group-btn"> 
     <button class="btn btn-secondary" type="button">Hate it</button> 
     </span> 
     <input type="text" class="form-control" placeholder="Product name"> 
     <span class="input-group-btn"> 
     <button class="btn btn-secondary" type="button">Love it</button> 
     </span> 
    </div> 
    </div> 

Answer 3

你可以简单的做到这一点，用bootstrap 拉左和右拉式类

<div> 
    <button class="btn btn-primary pull-left">Left div</button> 
    <button class="btn btn-primary pull-right">Right div</button> 
</div> 

Answer 4

更新了DEMO

DEMO ATTACHED：如果希望面板打开，请始终从div中删除类折叠。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 

 

 
     <div class="panel panel-default" style="margin-bottom:0px"> 
 
      <div class="panel-heading" style="border:0px"> 
 

 
       <div class="row"> 
 
        <div class="col-md-2 col-xs-2"><button type="button" class="btn-xs btn btn-info" data-toggle="collapse" data-target="#1">+</button></div> 
 
        <div class="col-md-3 col-xs-3">11</div> 
 
        <div class="col-md-3 col-xs-3">22</div> 
 
        <div class="col-md-3 col-xs-3">33</div> 
 
        <div class="col-md-1 col-xs-1"><button type="button" class="btn-xs btn btn-info" data-toggle="collapse" data-target="#1">-</button></div> 
 
       </div> 
 
       <div class="panel-body collapse" id="1"><hr />Panel Content Panel Content Panel Content Panel Content Panel Content Panel Content Panel Content Panel Content Panel Content</div> 
 
      </div> 
 

 

 
     </div> 
 

 
<div class="input-group"> 
 
     <div class="input-group-btn"> 
 
     <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#demo"> 
 
      Click me 
 
     </button>  
 
     </div> 
 
     <input type="text" class="form-control" placeholder="Text input with dropdown button"> 
 
    <div class="input-group-btn"> 
 
     <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo"> 
 
      Click me 
 
     </button>  
 
     </div> 
 
    </div> 
 
    <div id="demo" class="collapse well"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 
</div>