Bootstrap Panel with Input group

问题

What I am trying to do is have a bootstrap panel which has a button on the left side of it and a button on the right side of it. A bit like a input group, I hope this makes sense.

Excuse my paint skills but I thought I would attach an example of what I meant.

A panel may not be the best thing to use, so if there are any other suggestions feel free to let me know.

Thanks

回答1:

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

回答2:

You can simply do this, use the bootstrap pull-left and pull-right classes

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

回答3:

Ok thanks for all your input I think I have found a solution to what I am after

Here is the 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;
        }

And here is the 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>

I can improve this a bit further by having the header and footer to be solid colours.

回答4:

Updated the DEMO

DEMO ATTACHED: If you want the panel to open always remove class collapse from the 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>

来源：https://stackoverflow.com/questions/40079781/bootstrap-panel-with-input-group