<分区>
标签 html css bootstrap-4
<分区>
我正在尝试使用 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 份。但它是一体的
最佳答案
.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>
关于html - 为什么我的所有列都在一列中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58323198/
相关文章：
html - 导航栏下拉菜单不适用于 Angular 和 Bootstrap 4
javascript - 如何在javascript中将计时器添加到 Bootstrap 进度条
javascript - 如何调整字体大小和重排文本以适应带有 html 标签的父 div 的宽度和高度
javascript - Flash CC - HTML5 Canvas : Slideshow Navigation
html - Span 标签在 Drupal Bootstrap 子主题中显示为文本
html - 如何在 Victoire 生成的小部件中添加 HTML 属性
html - WKWebView 从文档目录加载 html 在设备上不起作用