0

我正在尝试学习一些引导程序 3，并且我正在尝试将一组两个按钮添加到面板标题中的Collapse-Accordion 的. 我希望能够将面板的标题排在左侧，将btn-group排在右侧。

我尝试添加pull-left标题和pull-right按钮组，但这不会产生漂亮的东西......

例如添加：style="margin-left:200px;"到<span>, 将起作用，但是当我添加更多具有不同名称的面板时，该边距将有另一个像素数......

这是我的JSfiddle 的链接。

我出错的地方可能在这里的某个地方：不确定我是否可以<span>在<h4>, 和我的这个目的中使用？

<div class="panel-heading">
  <h4 class="panel-title">
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
           Click me...
     </a>
     <span class="btn-group"> 
        <button class="btn btn-default">ON</button>
        <button class="btn btn-primary active">OFF</button>
    </span>
  </h4>
 </div>
4

4 回答 4

1

请尝试下面的代码，这是小提琴

        <div class="panel-heading">

                    <h4 class="panel-title">
                       <div class="row">
                         <div class="col-md-12">
                           <div class="col-md-6">
                        <a data-toggle="collapse" data-parent="#accordion"        href="#collapseOne">Click me...
                        </a>
                           </div>
                       <div class="col-md-6 text-right">
                       <span class="btn-group"> 
                            <button class="btn btn-default">ON</button>
                            <button class="btn btn-primary active">OFF</button>
                        </span>
                           </div>
                        </div>
                        </div>
                    </h4>  

                </div>
于 2013-11-06T11:26:37.537 回答
0

如果您更改 panel-head 和 btn-group 的一些 css 规则，它会起作用。

.btn-group{
    position: absolute;
    right: 8px;
    top: 8px;
}

.panel-heading{
    position: relative;
}

http://jsfiddle.net/q8qCW/1/

我建议不要将这些规则添加到每个 panel-head 和 btn-group ^^。我还将 btn-group 的大小更改为。

btn-group-xs

如果这样做，这不是一种非常动态的方式，但可以完成工作。其他大小的 btn 组是可能的，但需要不同的顶部和右侧 css 规则。

于 2013-11-06T11:20:33.767 回答
0

怎么用list-inline..

<div class="panel panel-default">
  <div class="panel-heading">
    <div class="panel-title">
      <ul class="list-inline">
        <li class="col-xs-12">
          <span class="btn-group pull-right"> 
             <button class="btn btn-default">ON</button>
             <button class="btn btn-primary active">OFF</button>
            </span>
           <h4>
             <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
               Click me...
             </a>
          </h4>
        </li>
      </ul> 
    </div>
   </div>
</div>

演示：http ://bootply.com/92157

于 2013-11-06T12:35:16.917 回答
0 
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Click me...
</a>
<span class="btn-group col-md-offset-9">
    <button class="btn btn-default">ON</button>
    <button class="btn btn-primary active">OFF</button>
</span>

嗨，我已将您的代码分叉到 js fiddle 并添加了一些类和媒体查询（出于想法），请尝试改进媒体查询。

你可以在这里找到

于 2013-11-06T11:31:59.597 回答