帶輸入組的引導面板

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>