入力グループのブートストラップパネル

Question

私がしようとしているのは、ブートストラップパネルの左側にボタンがあり、右側にボタンがあります。入力グループのようなビット、私はこれが理にかなってほしい。

私のペイントスキルは間違っていますが、私が意味するものの例を付け加えると思いました。

他の提案があるが、私に知らせて自由に感じるので、もしパネルには、使用するのに最適なものではないかもしれません。

おかげ

Answer 1

すべての入力のために[OK]を感謝し、私は私がここで

後にしています何の解決策は、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

は、ブートストラップにプル左とプル右クラス

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

Answer 4

更新を使用して試してみてくださいデモ

デモ貼り付け：パネルを開くには、常に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>