4

Twitter Bootstrap を使用して小さなサイドバーを作成しようとしています。

段落テキストを自由に折り返すことができるようにしたいのですが、ボタンは常に右側に配置したいと考えています。ただし、ブラウザのサイズを全画面表示から縮小して幅を小さくすると、垂直ボタン グループが次の行にドロップダウンし、while ウィンドウの幅を占有します。醜い。これを変更するにはどうすればよいですか?

基本的に、私は次のようなコードを見ています：

<div class="container">
  <div class="row" style="margin-top: 10px;">
    <div class="span9 citation-text">
      <p class="citation-text">Here is a ton of text that is supposed to be a citation
      but I'm hoping it'll wrap that's why it's not a citation. And yet it doesn't wrap
      so it looks like I'll have to keep writing and writing until it does.</p>
    </div>
    <div class="span3 vertical-btn-group citation-options">
      <input type="button" class="btn btn-small btn-block btn-info citation-edit"
      value="Edit" /> <input type="button" class=
      "btn btn-small btn-block btn-danger citation-remove" value="Remove" />
      <input type="button" class=
      "btn btn-small btn-block btn-warning citation-highlight" value="Highlight" />
    </div>
  </div>
</div>

JSFiddleへのリンクは次のとおりです。

http://jsfiddle.net/F39R8/

サイズ変更を試してみると、私が話していることがわかります。

4

3 に答える 3

2

ブラウザーのサイズが 未満に変更されると768px、Bootstrap はすべての列 (スパン*) の幅を 100% に設定し、スパンを垂直方向に積み重ねる「フロート」を削除します。CSS で @media クエリを使用して、これをオーバーライドできます。

@media (max-width: 767px) {
    .row .span9 {
        float:left;
        width:68%;
    }
    .row .span3 {
        float:left;
        width:28%;
    }
}

http://jsfiddle.net/skelly/F39R8/2/

于 2013-05-22T01:37:28.183 に答える
0

私は最近 CSS を自分で使い始めたばかりなので、これが最善の方法であるかどうかはわかりませんが、上記のリンクの CSS をオーバーライドしようとしたときに役立つようでした: CSS スタイルシートに移動し、関連するセクションを見つけます。そのdivタグに（「#actions」と呼ばれるように見えます）。入れてmin-width: 800px;、ブラウザウィンドウのサイズを変更してみてください。次に、ピクセル サイズを 400px などに調整し、比較のために再度サイズ変更します。これを微調整することで、（うまくいけば）探している望ましい動作を得ることができます。

于 2013-05-22T01:36:56.167 に答える