0

問題: ブートストラップ css を使用して作成したボタン グループは、以下に示すように、左側が切り取られて表示されます。

ここに画像の説明を入力

コード：

次の HTML ロジックがあります。

<div class="span5">
        <div class="row show-grid"> 
        <div class="btn-group>
            <button class="btn dropdown-toggle hidden-desktop visible-phone btn-warning" data-toggle="dropdown">show info&nbsp;<span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><div id="address"><?php echo anchor("mycontroller/method1/".$objectid,'addresses'); ?></div></li>
              <li><div id="logs"><?php echo anchor("mycontroller/method2/",'logs'); ?></div></li>
              <li><div id="status"><?php echo anchor("mycontroller/method3/",'status'); ?></div></li>
            </ul>
        </div>
        <br/>
            <div class="span2"><?php echo anchor("mycontroller/method4/","Back to List")?></div>
  </div><!-- end class row show-grid-->     
  <br/> 
</div>

私がこれまでに試したこと：

Firefox の Inspect ツールを使用して、上部のボタンと下部のボタンの違いを見つけようとしていますが、どのプロパティを探すべきかわかりません。次のようなプロパティを変更しようとしました：

padding-left
padding-right
margin-left 
margin-right

また、ボタンに適用されるクラスの数を減らそうとしました。

<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">

しかし、それは問題を解決しませんでした。誰かが私を正しい方向に向けることができますか? おそらく、追跡する必要があるプロパティのタイプに名前を付けることでしょうか? おそらくCSSの特異性の問題です...ブートストラップのものを変更していないためです。

ありがとう

4

5 に答える 5

0

以下は私の問題を解決しました

.btn {
     width:auto !important;
}
于 2014-02-15T16:04:12.117 に答える
0

OMG、答えは次のとおりです。

から変更する:

<div class="btn-group>

に：

<div class="btn-group">

あなたは忘れた"

ここでライブ修正を見ることができます: http://jsfiddle.net/kCsEs/

于 2013-03-28T13:55:16.910 に答える
0

これはハック修正ですが、ボタンを囲む div を含んでいます - あなたは単に持っているかもしれません

オーバーフロー:非表示

firebug を使用して chrome で調べて上に行くと、おそらくこれが表示されます. Bootstrap は、列をオーバーフローするデータを非表示にします。

于 2013-03-28T13:57:47.333 に答える
0

このCSSを与える

.btn{
display:block;
padding:XXpx;
margin:XXpx;
height:XXpx;
width:XXpx;
}
于 2013-03-28T13:20:06.303 に答える
0

グループ化されていないボタンにボタン グループを使用するのはなぜですか? 「切り離された」理由は、ボタン グループが一緒にマージされることになっているためです。

いずれにせよ、ボタンの内側の境界線は丸みを帯びていないため、そのように表示されます。境界半径を手動で適用することで修正できます。

border-top-left-radius: 4px; border-bottom-left-radius: 4px
于 2013-03-28T13:24:16.543 に答える