-1
旋轉木馬的標題和圓形指標的大小,當我在移動和全屏中對鉻的窗口進行緊縮時是相同的。當我在移動時可能會變小。Bootstrap旋轉木馬。如何減少移動電話上的標題和指標
感謝您的關注和不好的英語原諒!
桌面:
手機:
旋轉木馬的標題和圓形指標的大小,當我在移動和全屏中對鉻的窗口進行緊縮時是相同的。當我在移動時可能會變小。Bootstrap旋轉木馬。如何減少移動電話上的標題和指標
感謝您的關注和不好的英語原諒!
桌面:
手機:
您可以使用媒體查詢的CSS屬性指定另一個值:
例如:
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
@media (max-width: 767px) {
.carousel-caption h1 { /* Header */
font-size: 20px;
}
.carousel-caption p { /* Paragraph */
font-size: 12px;
}
.carousel-indicators li { /* Indicators */
width: 8px;
height: 8px;
}
.carousel-indicators .active { /* Active indicator */
width: 10px;
height: 10px;
}
}
@media (max-width: 480px) {
.carousel-caption h1 { /* Header */
font-size: 16px;
}
.carousel-caption p { /* Paragraph */
font-size: 10px;
}
.carousel-indicators li { /* Indicators */
width: 6px;
height: 6px;
}
.carousel-indicators .active { /* Active indicator */
width: 8px;
height: 8px;
}
}
.carousel img {
width: 100%;
}
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="//placehold.it/900x300/c69/f9c/?text=First" alt="">
<div class="carousel-caption">
<h1>Header</h1>
<p>Paragraph.</p>
</div>
</div>
<div class="item">
<img src="//placehold.it/900x300/9c6/cf9/?text=Second" alt="">
<div class="carousel-caption">
<h1>Header</h1>
<p>Paragraph.</p>
</div>
</div>
<div class="item">
<img src="//placehold.it/900x300/69c/9cf/?text=Third" alt="">
<div class="carousel-caption">
<h1>Header</h1>
<p>Paragraph.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
這是可能的,嘗試檢測的窗口的大小和作用於該信息。在Chrome中,您可以模擬這一點 - 當您打開控制檯時,左上角的按鈕將調整顯示大小。 – AgataB
@AgataB我猜OP是指標準的'768px'斷點。 –