13

Web サイトでボックス製品をレイアウトするには、同じ高さが必要です。下の画像を見ることができます ここに画像の説明を入力

ブレークに「clearfix」を使用すると問題なく動作するので、下の画像のように小さな画面（モバイルデバイス）で表示すると、ボックスの高さに問題があると思います！

コードの下のmysqlデータに製品をロードするため

 <div class="row">
 <?php foreach($contens as $content){?>
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
   <div class="contents-block">
    <div class="image"><img href="<?php echo $content['image'];?>" />
    </div>
        ................ some code .............
   </div>
  </div>
<?php } ?>

私のデザインのように表示するには、すべてのボックスが同じ高さである必要があります。これについてのアイデア！

4

4 に答える 4

4

コンテンツを切り詰めたくない場合は、2 つの方法で対処できます。

1.使用する<div class="clearfix visible-xs"></div>

ここで提案: https://github.com/twbs/bootstrap/issues/9454

理解するのは簡単ですが、空の clearfix div が生成されます。個人的には、これがマークアップを汚染していると考えています。さらに、コレクションを動的にループしている場合、状況が悪化する可能性があり、次のようなコードを使用することになる可能性があります。

<% @posts.each do |post| %>
  <div class="col-sm-6 col-md-4">
    <%= post.body %>
  </div>

  <% unless index == 0 %>
    <% # add a visible clearfix every 3 posts in medium ~ large screen, respond to col-md-4 %>
    <% if index % 2 == 0 %>
      <div class="clearfix visible-md visible-lg"></div>
    <% # add a visible clearfix every 2 posts in small screen, respond to col-sm-6 %>
    <% elsif index % 1 == 0 %>
      <div class="clearfix visible-sm"></div>
    <% end %>
  <% end %>
<% end %>

2. css nth-child セレクターを使用する

この問題で最初に提案された: https://github.com/twbs/bootstrap/issues/9454

再利用可能で、コードをきれいに保ちますが、機能させるには余分なものを追加する必要があります。また、そのための小さな構文を覚えておく必要があります。<div class="row multi-columns-row">

https://github.com/sixfootsixdesigns/Bootstrap-3-Grid-Columns-Clearing

私はおそらく2番目の解決策に行くでしょう。

于 2013-11-28T05:31:32.457 に答える
0

そのようなものを修正したいすべての反復にclearfixを入れるだけです...

この例は完全に機能します。

<div class="row">
 <?php 
  $i = 0;
  foreach($contens as $content){
  if(($i + 1) % 2 == 0 && ($i + 1) % 4 == 0){
 ?>
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
   <div class="contents-block">
    <div class="image"><img href="<?php echo $content['image'];?>" />
    </div>
        ................ some code .............
   </div>
  </div>
  <div class="clearfix visible-md-block"></div>
  <div class="clearfix visible-sm-block"></div>
<?php }else if(($counterpopular + 1) % 4 == 0){ ?>
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
   <div class="contents-block">
    <div class="image"><img href="<?php echo $content['image'];?>" />
    </div>
        ................ some code .............
   </div>
  </div>
  <div class="clearfix visible-md-block"></div>
 <?php }else if(($counterpopular + 1) % 2 == 0){ ?>
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
   <div class="contents-block">
    <div class="image"><img href="<?php echo $content['image'];?>" />
    </div>
        ................ some code .............
   </div>
  </div>
  <div class="clearfix visible-xs-block"></div>
<?php }else{ ?>
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
   <div class="contents-block">
    <div class="image"><img href="<?php echo $content['image'];?>" />
    </div>
        ................ some code .............
   </div>
  </div>
<?php 
}  $i++; }
?>
于 2015-08-12T04:21:16.803 に答える
0

div の高さを固定する必要があります。そうしないと、コンテンツを受け入れるように変更されます。

すなわち

.image { 高さ: 200px; }

次に、固定の高さに合わせてコンテンツを切り詰める方法を見つける必要があります。

overflow: hidden を設定することもできますが、重要なものが途切れる可能性があります。テキストを単純に切り捨てたい場合があります。CSS-Tips にはそれに関する情報があります: http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

于 2013-10-25T17:32:49.367 に答える