1. ホーム
  2. 質問と答え
  3. ブートストラップで同じサイズの列を連続して取得するにはどうすればよいですか？

ブートストラップで同じサイズの列を連続して取得するにはどうすればよいですか？

2016-12-08 9 views
1

これは、同様の質問で提供されている方法と重複した質問としては考慮しないでください。動作していないようです。ブートストラップで同じサイズの列を連続して取得するにはどうすればよいですか？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container"> 
 
    <div class="row">  
 
    <div class="col-sm-6 col-md-3" >   
 
     <div class="thumbnail">    
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=407%C3%97832&w=407&h=832" alt="thumb01" class="img-responsive" style="max-height:242px; width: auto;"> 
 
     <div class="caption"> 
 
      <h4>Apple iPhone 6 (Space Grey, 16 GB)</h4> 
 
      <p>500</p> 
 
      <p><a href="#" class="btn btn-primary" role="button">View Product</a></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6 col-md-3" >   
 
     <div class="thumbnail">    
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=78&txt=832%C3%97562&w=832&h=562" alt="thumb01" class="img-responsive" style="max-height:242px; width: auto;"> 
 
     <div class="caption"> 
 
      <h4>HP Core i3 5th Gen - (4 GB/1 TB HDD/DOS) X5Q17PA 15-be005TU Notebook (15.6 inch, Turbo SIlver, 2.19 kg)</h4> 
 
      <p>350</p> 
 
      <p><a href="#" class="btn btn-primary" role="button">View Product</a></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6 col-md-3" >   
 
     <div class="thumbnail">    
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=40&txt=424%C3%97832&w=424&h=832" alt="thumb01" class="img-responsive" style="max-height:242px; width: auto;"> 
 
     <div class="caption"> 
 
      <h4>Redmi Note 3 (Dark Grey, 16 GB)</h4> 
 
      <p>50</p> 
 
      <p><a href="#" class="btn btn-primary" role="button">View Product</a></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6 col-md-3" >   
 
     <div class="thumbnail">    
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=78&txt=832%C3%97539&w=832&h=539" alt="thumb01" class="img-responsive" style="max-height:242px; width: auto;"> 
 
     <div class="caption"> 
 
      <h4>HP Pavilion Celeron Dual Core - (2 GB/500 GB HDD/DOS) W0H99PA 11-S003TU Notebook (11.6 inch, Black, 1.23 kg)</h4> 
 
      <p>350</p> 
 
      <p><a href="#" class="btn btn-primary" role="button">View Product</a></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

私は同じ寸法の外箱を取得しようとしています。

フルスクリーンで出力をご覧ください。

foreach内でループしている1つのdiv、つまりデータがデータベースから来ているため、カスタムdivとカスタムスタイルを各div colに追加できません。

私はstyle="max-height:242px; width: auto;"をイメージに適用して、サイズが同じになるようにしました。しかし、問題はテキストがより多くの場合です。

同じサイズのボックスを取得する方法を教えてください。より多くのテキストがある場合でも、ボックスは同じサイズのままです。

ありがとうございました！

出典

2016-12-08 Phoenix

+0

さらにテキストがある場合、ボックスは同じままにできますか？それはサイズが増加しなければならない。文字を制限するとどうなりますか？それはチャンスですか？ – Aslam

+0

それは私が完全なタイトルを見せたいと思ったので、最後にやることです。最大のdivを見つけてそのサイズに他のものを設定するためのjavascriptの方法はありますか？ – Phoenix

+0

はい、それは可能性があります:)私の答えを追加 – Aslam

答えて

0 

.fx-container, 
 
.fx-container > div { 
 
    display: flex; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container"> 
 
    <div class="row fx-container">  
 
    <div class="col-sm-6 col-md-3" >   
 
     <div class="thumbnail">    
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=407%C3%97832&w=407&h=832" alt="thumb01" class="img-responsive" style="max-height:242px; width: auto;"> 
 
     <div class="caption"> 
 
      <h4>Apple iPhone 6 (Space Grey, 16 GB)</h4> 
 
      <p>500</p> 
 
      <p><a href="#" class="btn btn-primary" role="button">View Product</a></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6 col-md-3" >   
 
     <div class="thumbnail">    
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=78&txt=832%C3%97562&w=832&h=562" alt="thumb01" class="img-responsive" style="max-height:242px; width: auto;"> 
 
     <div class="caption"> 
 
      <h4>HP Core i3 5th Gen - (4 GB/1 TB HDD/DOS) X5Q17PA 15-be005TU Notebook (15.6 inch, Turbo SIlver, 2.19 kg)</h4> 
 
      <p>350</p> 
 
      <p><a href="#" class="btn btn-primary" role="button">View Product</a></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6 col-md-3" >   
 
     <div class="thumbnail">    
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=40&txt=424%C3%97832&w=424&h=832" alt="thumb01" class="img-responsive" style="max-height:242px; width: auto;"> 
 
     <div class="caption"> 
 
      <h4>Redmi Note 3 (Dark Grey, 16 GB)</h4> 
 
      <p>50</p> 
 
      <p><a href="#" class="btn btn-primary" role="button">View Product</a></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6 col-md-3" >   
 
     <div class="thumbnail">    
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=78&txt=832%C3%97539&w=832&h=539" alt="thumb01" class="img-responsive" style="max-height:242px; width: auto;"> 
 
     <div class="caption"> 
 
      <h4>HP Pavilion Celeron Dual Core - (2 GB/500 GB HDD/DOS) W0H99PA 11-S003TU Notebook (11.6 inch, Black, 1.23 kg)</h4> 
 
      <p>350</p> 
 
      <p><a href="#" class="btn btn-primary" role="button">View Product</a></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

を追加して使用する必要があります。これは最小限のもので、必要に応じてスタイルを追加できます。

は

参考：行のためのhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/

出典

2016-12-08 06:34:59

+0

ありがとうございました！働いた。 – Phoenix

+0

喜んでそれはあなたを助けます:) –

+0

これは、列が応答しないようにします！ –

-1

スタイル下記の使用

.row { 
    display: -webkit-flex; 
    display: flex; 
} 
.col-sm-6.col-md-3 { 
    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1; 
}

これは単なるスタイルです：あなたはあなたがそのためにFlexboxを使用することができます異なるクラス名

出典

2016-12-08 06:14:15 RRp

+0

あなたの答えはもっと具体的でなければなりません。 – Aslam

+0

私は欲しかったことをやっていませんでした。スタイルについて使用してボックスが同じ寸法でないため、出力を見ることができるスニペットを行うことができます – Phoenix

0

使用フレックス：

しかし、それが応答しなく.rowをレンダリングするので、メディアクエリ内display:flexを追加します。

は、同じ高さの列の全ページを行きます

@media (min-width: 768px) { 
 
    .row { 
 
    display: flex; 
 
    } 
 
    [class*=col-sm-] .thumbnail { 
 
    height: 100%; 
 
    } 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6 col-md-3"> 
 
     <div class="thumbnail"> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=407%C3%97832&w=407&h=832" alt="thumb01" class="img-responsive" style="max-height:242px; width: auto;"> 
 
     <div class="caption"> 
 
      <h4>Apple iPhone 6 (Space Grey, 16 GB)</h4> 
 
      <p>500</p> 
 
      <p><a href="#" class="btn btn-primary" role="button">View Product</a> 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6 col-md-3"> 
 
     <div class="thumbnail"> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=78&txt=832%C3%97562&w=832&h=562" alt="thumb01" class="img-responsive" style="max-height:242px; width: auto;"> 
 
     <div class="caption"> 
 
      <h4>HP Core i3 5th Gen - (4 GB/1 TB HDD/DOS) X5Q17PA 15-be005TU Notebook (15.6 inch, Turbo SIlver, 2.19 kg)</h4> 
 
      <p>350</p> 
 
      <p><a href="#" class="btn btn-primary" role="button">View Product</a> 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6 col-md-3"> 
 
     <div class="thumbnail"> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=40&txt=424%C3%97832&w=424&h=832" alt="thumb01" class="img-responsive" style="max-height:242px; width: auto;"> 
 
     <div class="caption"> 
 
      <h4>Redmi Note 3 (Dark Grey, 16 GB)</h4> 
 
      <p>50</p> 
 
      <p><a href="#" class="btn btn-primary" role="button">View Product</a> 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6 col-md-3"> 
 
     <div class="thumbnail"> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=78&txt=832%C3%97539&w=832&h=539" alt="thumb01" class="img-responsive" style="max-height:242px; width: auto;"> 
 
     <div class="caption"> 
 
      <h4>HP Pavilion Celeron Dual Core - (2 GB/500 GB HDD/DOS) W0H99PA 11-S003TU Notebook (11.6 inch, Black, 1.23 kg)</h4> 
 
      <p>350</p> 
 
      <p><a href="#" class="btn btn-primary" role="button">View Product</a> 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

出典

2016-12-08 06:42:32

+0

ありがとうございます。それを反応させるため。 – Phoenix

 関連する問題

  • 関連する問題はありません^_^