Question

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

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

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

由于

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

您可以简单地执行此操作，使用引导程序向左拉和向右拉类

<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

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 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面板

4 个答案: