0

ウェブサイトがこの-lg-サイズになると、次のようになります。

望ましい結果: ここに画像の説明を入力

しかし、私はこれで終わるだけです：

実結果： ここに画像の説明を入力

<div class="container">

  <div id="title" class="col-xs-12 col-md-6 col-lg-4">THE<br/>TITLE</div>  
  <div class="clearfix">
  </div>

  <div id="menu" class="col-xs-12 col-lg-4">MENU<br/>item1<br/>item2<br/>item3</div>

  <div class="content">
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Foo<br/>Foo<br/>Foo<br/>Foo</div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Bar<br/>Bar<br/>Bar<br/>Bar</div>
    <div class="clearfix"></div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Ham<br/>Ham<br/>Ham<br/>Ham</div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Jam<br/>Jam<br/>Jam<br/>Jam</div>
    <div class="clearfix"></div>

  </div>

</div>

私が望むことは可能ですか、それともブートストラップに最適な設計ではありませんか?

https://jsfiddle.net/clankill3r/0o1mz65n/

4

3 に答える 3

0

content div に col-lg-4 を追加するのはどうですか?

<div class="container">

  <div id="title" class="col-xs-12 col-md-6 col-lg-4">THE<br/>TITLE</div>  
  <div class="clearfix">
  </div>

  <div id="menu" class="col-xs-12 col-lg-4">MENU<br/>item1<br/>item2<br/>item3</div>

  <div class="content col-lg-4">
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Foo<br/>Foo<br/>Foo<br/>Foo</div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Bar<br/>Bar<br/>Bar<br/>Bar</div>
    <div class="clearfix"></div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Ham<br/>Ham<br/>Ham<br/>Ham</div>
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Jam<br/>Jam<br/>Jam<br/>Jam</div>
    <div class="clearfix"></div>

  </div>

</div>

https://jsfiddle.net/t528eozd/

于 2016-04-20T13:55:21.117 に答える
0

Bootstrap CSS のバージョンを確認すると、オフセットに間違ったクラスを使用していることに気付くでしょう。col-xx-offset-x古いオフセット クラスです。お使いのバージョンが使用していますoffset-xx-x(つまり、offset-lg-4)。

また、必要なオフセットは 1 つだけです - 4 つの Ham を含む div で。

更新された JSFiddle

<div class="col-xs-12 col-lg-4 offset-lg-4">Ham
    <br/>Ham
    <br/>Ham
    <br/>Ham
</div>

注- これを設定するrowには、clearfix を複数回使用する代わりにクラスを使用する、よりクリーンな方法をお勧めします。

ここにデモがあります

編集/更新- 行を使用し、メニューを独自のメニューに分割しcol-lg-4、Foo、Bar、Ham、Jam をcol-lg-82 つの行を含む a に分割する、より技術的に正しいバージョン。また、オフセットの必要もありません。

ここにあります

于 2016-04-20T13:55:36.220 に答える