如何在轮播引导程序4上设置标签

我有1个图片的轮播,在bootstrap4下,我有制表符

我的问题是: 如何在轮播上设置标签固定。 不管我怎么努力,这两者都是相互依存的。

see mycarousel : image1

看看我的目标:

image2

看。标签确实在图像上。

我的代码:

@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>

感谢您指导我如何在转盘上放置标签

评论