绝对定位 div 显示时一分为二
Absolute positioned div split into two when displayed
我正在试验 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>
卡片列本身位于一个容器内,该容器的一行只有一个 col-sm-12
列。
这是显示的内容:
Button menu displayed into half
这里有什么问题? dropdown-menu
div class 有绝对定位。
您在示例中使用了 .card-column
布局,它将使用 column
CSS 属性。 .card-column
布局中的默认 column-count
似乎具有 3
.
的值
即使 .dropdown-menu
的 position
值为 absolute
,也没有足够的空间让 .dropdown-menu
显示在第一列中,因为它是不够高
这就是它出现在下一栏顶部的原因。
解决此问题的一个简单方法是增加 .card
元素的 margin-bottom
,但是如果您希望减少 [=16],这将导致列之间出现间隙=] 在较小的屏幕尺寸上,一旦您向 .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>
我正在试验 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>
卡片列本身位于一个容器内,该容器的一行只有一个 col-sm-12
列。
这是显示的内容:
Button menu displayed into half
这里有什么问题? dropdown-menu
div class 有绝对定位。
您在示例中使用了 .card-column
布局,它将使用 column
CSS 属性。 .card-column
布局中的默认 column-count
似乎具有 3
.
即使 .dropdown-menu
的 position
值为 absolute
,也没有足够的空间让 .dropdown-menu
显示在第一列中,因为它是不够高
这就是它出现在下一栏顶部的原因。
解决此问题的一个简单方法是增加 .card
元素的 margin-bottom
,但是如果您希望减少 [=16],这将导致列之间出现间隙=] 在较小的屏幕尺寸上,一旦您向 .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>