带输入组的引导面板

Question

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

请原谅我的绘画技巧，但我想我会附上一个例子来说明我的意思。

面板可能不是最好的选择，所以如果有任何其他建议，请随时告诉我。

谢谢

Answer 1

更新了演示

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>

Answer 2

好的，感谢您的所有意见，我想我已经找到了我所追求的解决方案

这里是 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 3

您可以简单地做到这一点，使用引导程序 pull-left 和 pull-right 类

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

Answer 4

试试这个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>