0

私はいくつかのブートストラップ 3 を学習しようとしています。2 つのボタンのグループを、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

を使用するのはどうですか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 フィドルにフォークし、いくつかのクラスとメディア クエリを追加しました (アイデアのために)。メディア クエリも改善してみてください。

ここで見つけることができます

于 2013-11-06T11:31:59.597 に答える