1

私はBootstrap 4を試していて、カード列の中にカードがあります:

<div class="card-columns">
   <div class="card">
      <div class="card-block">
         <h4 class="card-title">iPhone 5S</h4>
         <h6 class="card-subtitle text-muted">Rp. 8.999.999</h6>
      </div>
      <img data-src="holder.js/100%x200" alt="100%x200" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
      <div class="card-block">
         <p class="card-text">Apple iPhone 5S adalah handphone tercanggih dari Apple. Dapatkan
            dengan harga khas dari Shopoza! Nikmati cicilan 0%
         </p>
         <div class="btn-group open">
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Add to cart</a>
            <div class="dropdown-menu" style="
               /* min-height: 100%; */
               /* overflow: auto; */
               /* max-height: 100%; */
               /* height: 100%; */
               ">
               <a class="dropdown-item" href="#">Action</a>
               <a class="dropdown-item" href="#">Another action</a>
            </div>
         </div>
         <a href="#" class="btn btn-secondary card-link">Quick checkout</a>
      </div>
      <!-- card block -->
   </div>
   <!-- card -->
</div>

カード列自体は、1 つの列を持つ行を持つコンテナー内にありcol-sm-12ます。

これが表示されるものです：

半分に表示されたボタン メニュー

ここで何が問題なのですか？div クラスにはdropdown-menu絶対位置があります。

4

1 に答える 1

1

この例では、 CSS プロパティ.card-columnを利用するレイアウトを使用しています。レイアウトcolumnのデフォルトcolumn-countの値は のようです。.card-column3

.dropdown-menuのposition値が であっても、高さが十分でないため、最初の列に を表示するabsolute十分なスペースがありません。 そのため、次の列の上部に表示されます。.dropdown-menu

margin-bottomこれを修正する簡単な方法は、要素の数を増やすことです.cardが、これにより、列間にギャップが生じます。column-count小さな画面サイズで要素を減らしたい場合、アイテムを追加する.dropdown-menu必要があります。列の高さをさらに増やすため、これは良い解決策ではありません。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css');

.card-columns {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
  text-align: center;
}

.card {
  margin-bottom: 3.75rem;
  max-width: 22.5rem; 
}

@media screen and (min-width: 34em) { 
  .card-columns {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
  }

  .card {
    max-width: 22.5rem;    
  }
}

@media screen and (min-width: 48em) { 
  .card-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: .55rem;
    -moz-column-gap: .55rem;
    column-gap: .55rem;
    text-align: left;
  }
}

@media screen and (min-width: 62em) { 
  .card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="card-columns">

      <div class="card">
        <div class="card-block">
          <h4 class="card-title">iPhone 5S</h4>
          <h6 class="card-subtitle text-muted">Rp. 8.999.999</h6>
        </div>
        <img src="http://placehold.it/380x200" class="img-responsive"/>
        <div class="card-block">
          <p class="card-text">Apple iPhone 5S adalah handphone tercanggih dari Apple. Dapatkan
            dengan harga khas dari Shopoza! Nikmati cicilan 0%
          </p>
          <div class="btn-group">
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Add to cart</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
            </div>
          </div>
          <a href="#" class="btn btn-secondary card-link">Quick checkout</a>
        </div>
        <!-- card block -->
        <!-- card -->
      </div>

      <div class="card">
        <div class="card-block">
          <h4 class="card-title">iPhone 5S</h4>
          <h6 class="card-subtitle text-muted">Rp. 8.999.999</h6>
        </div>
        <img src="http://placehold.it/380x200" class="img-responsive"/>
        <div class="card-block">
          <p class="card-text">Apple iPhone 5S adalah handphone tercanggih dari Apple. Dapatkan
            dengan harga khas dari Shopoza! Nikmati cicilan 0%
          </p>
          <div class="btn-group">
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Add to cart</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
            </div>
          </div>
          <a href="#" class="btn btn-secondary card-link">Quick checkout</a>
        </div>
        <!-- card block -->
        <!-- card -->
      </div>

      <div class="card">
        <div class="card-block">
          <h4 class="card-title">iPhone 5S</h4>
          <h6 class="card-subtitle text-muted">Rp. 8.999.999</h6>
        </div>
        <img src="http://placehold.it/380x200" class="img-responsive"/>
        <div class="card-block">
          <p class="card-text">Apple iPhone 5S adalah handphone tercanggih dari Apple. Dapatkan
            dengan harga khas dari Shopoza! Nikmati cicilan 0%
          </p>
          <div class="btn-group">
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Add to cart</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
            </div>
          </div>
          <a href="#" class="btn btn-secondary card-link">Quick checkout</a>
        </div>
        <!-- card block -->
        <!-- card -->
      </div>
    </div>
  </div>
</div>

より良い解決策は、.card-deckレイアウトを にdisplay設定して使用することflexです。ここに例があります。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css');

.card-deck {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.card-deck .card {
  flex: 0 1 22.5rem;
  margin: 0 .25rem .50rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="card-deck">
      <div class="card">
        <div class="card-block">
          <h4 class="card-title">iPhone 5S</h4>
          <h6 class="card-subtitle text-muted">Rp. 8.999.999</h6>
        </div>
        <img src="http://placehold.it/380x200" class="img-responsive"/>
        <div class="card-block">
          <p class="card-text">Apple iPhone 5S adalah handphone tercanggih dari Apple. Dapatkan
            dengan harga khas dari Shopoza! Nikmati cicilan 0%
          </p>
          <div class="btn-group">
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Add to cart</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
            </div>
          </div>
          <a href="#" class="btn btn-secondary card-link">Quick checkout</a>
        </div>
        <!-- card block -->
        <!-- card -->
      </div>
      <div class="card">
        <div class="card-block">
          <h4 class="card-title">iPhone 5S</h4>
          <h6 class="card-subtitle text-muted">Rp. 8.999.999</h6>
        </div>
        <img src="http://placehold.it/380x200" class="img-responsive"/>
        <div class="card-block">
          <p class="card-text">Apple iPhone 5S adalah handphone tercanggih dari Apple. Dapatkan
            dengan harga khas dari Shopoza! Nikmati cicilan 0%
          </p>
          <div class="btn-group">
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Add to cart</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
            </div>
          </div>
          <a href="#" class="btn btn-secondary card-link">Quick checkout</a>
        </div>
        <!-- card block -->
        <!-- card -->
      </div>
      <div class="card">
        <div class="card-block">
          <h4 class="card-title">iPhone 5S</h4>
          <h6 class="card-subtitle text-muted">Rp. 8.999.999</h6>
        </div>
        <img src="http://placehold.it/380x200" class="img-responsive"/>
        <div class="card-block">
          <p class="card-text">Apple iPhone 5S adalah handphone tercanggih dari Apple. Dapatkan
            dengan harga khas dari Shopoza! Nikmati cicilan 0%
          </p>
          <div class="btn-group">
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Add to cart</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
            </div>
          </div>
          <a href="#" class="btn btn-secondary card-link">Quick checkout</a>
        </div>
        <!-- card block -->
        <!-- card -->
      </div>
    </div>
  </div>
</div>

于 2015-11-22T14:57:12.993 に答える