Bootstrap 带输入组的面板

Question

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

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

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

谢谢

Answer 1

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

你可以简单地这样做，使用 bootstrap 向左拉 和 向右拉 类

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

Answer 3

更新了DEMO

已附加演示：如果您希望打开面板，请始终从 div 中删除 class 折叠。

<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 4

好的，感谢您的所有意见，我想我已经找到了解决问题的方法

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

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

Bootstrap 带输入组的面板

Bootstrap Panel with Input group

panel

twitter-bootstrap

twitter-bootstrap-3