- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在尝试在我的小元素中使用 bootstrap 4 carousel。我使用了他们网站上提供的示例代码,转载如下。当我从手机上查看网站时,正如预期的那样完美。然而,在膝上型电脑屏幕上, slider 图像占屏幕的一半——非常大。即使我缩小了浏览器(chrome 和 Firefox),图像仍然和原来一样大。我尝试在 CSS 文件中进行媒体查询,如下所示:
@media only screen and (min-width: 768px) {
.myCarousel .carousel .carousel-inner .img {
height: 250px;}
}
然而,它并没有起作用。以下是供您引用的 HTML 代码:
<div class="myCarousel">
<div id="carouselCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselCaptions" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" data-interval="2000">
<img src="{% static 'img/slider/slide1.jpg' %}" class="d-block w-100" alt="">
<div class="carousel-caption">
<h5>First Slide Caption</h5>
</div>
</div>
<div class="carousel-item" data-interval="2000">
<img src="{% static 'img/slider/slide2.png' %}" class="d-block w-100" alt="">
<div class="carousel-caption">
<h5>Second Slide Caption</h5>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
非常感谢您的帮助。
最佳答案
按照示例,我更新了带高度调整的旋转木马 slider 。根据您的要求,可选择调整媒体查询宽度和轮播 slider 高度。
.carousel .carousel-item img {
height: 200px;
object-fit: cover;
}
@media (min-width: 768px) {
.carousel .carousel-item img {
height: 350px;
object-fit: cover;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="myCarousel">
<div id="carouselCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselCaptions" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" data-interval="2000">
<img src="https://via.placeholder.com/1920x650" class="d-block w-100" alt="">
<div class="carousel-caption">
<h5>First Slide Caption</h5>
</div>
</div>
<div class="carousel-item" data-interval="2000">
<img src="https://via.placeholder.com/1920x750" class="d-block w-100" alt="">
<div class="carousel-caption">
<h5>Second Slide Caption</h5>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
关于html - 如何在大屏幕上缩小 bootstrap 4 轮播图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55718020/
是否可以在 android list 文件中禁用对超大屏幕的支持?我们已经开发了一个应用程序,但还没有改变平板电脑的设计,所以我们想在以后的版本中禁用平板电脑支持。 我们使用 phonegap/htm
我查到的信息:320dp:典型的手机屏幕(240x320 ldpi、320x480 mdpi、480x800 hdpi 等)。480dp:类似 Streak 的补间数位板 (480x800 mdpi)
我创建了 4 个不同的布局文件并将它们放在 layout , layout-small,layout-large,layout-xlarge. 文件夹和在 QVGA、HVGA 和 WXGA 仿真器中测
我有一个名为 showPage 的节目转场从 View Controller 到 TableView Controller ,我正在调用 performSegueWithIdentifier()在单击
我是一名优秀的程序员,十分优秀!