Question

我编写了以下代码，在旋转木马下面添加了一个联系人部分（仅包含文字）：

    <div class="container-fluid margin-top-15" style="height: 50%;">
            <div class="row" style="height: 100%">
                <div class="col-md-12 col-sm-12" style="background-color: #4EA2D2">
                    <div id="carouselContent" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner" role="listbox">
                            <div class="carousel-item active text-center p-4">
                                <p></p>

                            </div>
<div class="carousel-item text-center p-4">
                                <p></p>

                            </div>

                        <a class="carousel-control-prev" href="#carouselContent" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                    </div>
                    <a class="carousel-control-next" href="#carouselContent" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row margin-top-15">
                <div class="col-md-6 col-sm-12">
                    <h4>Contactformulier</h4>
                    <form>
                        <div class="form-group">
                            <label for="inputName">Naam</label>
                            <input type="text" class="form-control form-control-sm" id="inputName" placeholder="Vul uw naam in">
                        </div>
                        <div class="form-group">
                            <label for="inputSurname">Achternaam</label>
                            <input type="text" class="form-control form-control-sm" id="inputSurname" placeholder="Vul uw achternaam in">
                        </div>
                        <div class="form-group">
                            <label for="inputCompany">Bedrijf</label>
                            <input type="text" class="form-control form-control-sm" id="inputCompany" placeholder="Vul uw bedrijfsnaam in">
                        </div>
                        <div class="form-group">
                            <label for="inputEmail">Email</label>
                            <input type="email" class="form-control form-control-sm" id="inputEmail" placeholder="Vul uw e-mail in">
                        </div>
                        <div class="form-group">
                            <label for="inputPhone">Telefoonnummer</label>
                            <input type="text" class="form-control form-control-sm" id="inputPhone" placeholder="Vul uw telefoonnummer in">
                        </div>
                        <div class="form-group">
                            <label for="inputContact">Opmerking</label>
                            <textarea  class="form-control form-control-sm" id="inputContact" placeholder="Vul uw vraag of opmerking in"></textarea>
                        </div>
                        <button type="submit" class="btn btn-sm btn-primary">Versturen</button>
                    </form>
                </div>
                <div class="col-md-6 col-sm-12">
                    <h4>Contactgegevens</h4>
                    <ul>
                        <li></li>
                    </ul>
                    <div id="map"></div>
                </div>
            </div>
        </div>

我想在移动设备上使用此网页时将我的联系表单放在我的旋转木马下面，但不知何故两个容器都重叠了。任何人都可以帮我解决这个问题吗？

Answer 1

您需要清除旋转木马div后的css

#carouselContent{
    clear: both;
}

上面的css代码将阻止移动设备中的div重叠。

如果您需要有关 clear：both css的详细说明，可以在此answer

中找到

Answer 2

将内联css属性添加到容器div。你可以添加这个css属性eithr internal或者从外部css添加类引用，如.container {clear：both;}

阻止容器重叠

2 个答案: