我有1个图片的轮播,在bootstrap4下,我有制表符
我的问题是: 如何在轮播上设置标签固定。 不管我怎么努力,这两者都是相互依存的。
see mycarousel : image1
看看我的目标:
看。标签确实在图像上。
我的代码:
@media (min-width: 768px) {
#mycarousel{
height: 50vh;
overflow: hidden;
}
}
.search{
color: #656565;
}
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item ">
<img src="assets/img/2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item active">
<img src="assets/img/2.jpg" class="d-block w-100" alt="...">
</div>
<!-- <div class="carousel-item">-->
<!-- <img src="..." class="d-block w-100" alt="...">-->
<!-- </div>-->
</div>
</div>
<section class="search py-4">
<div class="container bg-dark">
<div class="row">
<div class="col-12">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">هتل داخلی</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">هتل خارجی</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<form>
<div class="form-row">
<div class="form-group col-md-4 col-sm-12">
<label for="exampleInputEmail1">مقصد</label>
<input type="text" class="form-control" id="goal" aria-describedby="emailHelp">
</div>
<div class="form-group col-md-2 col-sm-12">
<label for="exampleInputPassword1">مقصد2</label>
<input type="text" class="form-control" id="goal2">
</div>
<div class="form-group col-md-2 col-sm-12">
<label for="exampleInputPassword1">مقصد3</label>
<input type="text" class="form-control" id="goal3">
</div>
<div class="form-group col-md-2 col-sm-12">
<label for="exampleInputPassword1">مقصد 4</label>
<input type="text" class="form-control" id="goal4">
</div>
<button type="submit" class="btn btn-primary col-md-2 col-sm-12">Submit</button>
</div>
</form>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
</div>
</div>
</div>
</div>
</section>
感谢您指导我如何在转盘上放置标签