Question

我正在尝试使用HTML / CSS切片图像。但是，我受制于想要放在3列中的表格，但是将其全部放在第一列中。

它唯一起作用的时间是在命令部分中设置表单和另一个div时。但我想尽可能保留这些。

我正在使用Bootstrap 4。

HTML：

<header id="home">
    <div class="container">
        <div class="row besspar-form-div">
            <div class="form-div">
                <form action="" method="post">
                    <div class="form-group col-md-4 width-36p">
                        <p>
                            <img src="img/phone-round.png" alt="" class="img-phone">
                            <img src="img/phone-round-or.png" alt="" class="img-phone-or">
                            Om welk toestel gaat het?
                        </p>
                        <select name="brand" class="form-control round-control" required>
                            <option value="">SELECT JE MERK</option>
                            <option value="Apple">Apple</option>
                            <option value="Samsung">Samsung</option>
                            <option value="Huawei">Huawei</option>
                            <option value="opt-seprator" disabled>───────────────</option>
                            <option value="Motorola">Motorola</option>
                            <option value="Sony">Sony</option>
                            <option value="LG">LG</option>
                            <option value="OnePlus">OnePlus</option>
                            <option value="HTC">HTC</option>
                        </select>
                    </div>
                    <div class="form-group col-md-4 width-36p">
                        <p>
                            <img src="img/mailbox.png" alt="" class="img-mail">
                            <img src="img/mailbox-or.png" alt="" class="img-mail-or"> Wat is je postcode?
                        </p>
                        <input type="text" name="pincode" class="form-control round-control" placeholder="1234 AB" required>
                    </div>
                    <div class="form-group col-md-4 width-28p">
                        <button type="submit" class="btn btn-prijzen">
                            Prijzen vergelijken
                        </button>
                        <p class="fs-16b">
                            <span class="small-circle"></span>100% Gratis en vrijblijvend
                        </p>
                    </div>
                </form>
            </div>
        </div>
    </div>
</header>

CSS：

.round-control {
    border-radius: 25px;
    border: 1px solid #ccc;
    height: 400px;
    color: inherit
 }

div.besspar-form-div {
    padding: 40px 0px;
    background-color: #FFFFFF;
    margin: 30px auto;
    border-radius: 15px;
}

div.form-div {
    width: 90%;
    margin: auto;
}

.img-phone, .img-mail {
    display: inline-block;
}

.img-phone-or, .img-mail-or {
    display: none;
}

select {
    -webkit-appearance: menulist-button;
    background: url("../img/down-arr.png") 96% / 15% no-repeat #eee;
    background-size: 16px;
}

p.fs-16b {
    font-size: 16px;
    font-family: Montserrat-bold;
    color: #ffad18;
    padding-bottom: 0px;
    padding-top: 10px;
}

.small-circle {
    content: "\25CF";
    font-size: 20px;
    color: #3EB7D3;
}

我希望这些列将把我制作的列的数量分成3个。但是它合而为一

Answer 1

.col-md-4必须是.row的直接子代。

这有效

<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>

这不是

<div class="row">
    <div class="something">
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
    </div>
</div>

为什么我所有的列都放在一列中？

1 个答案: