如何在网格系统中添加多个元素并使其响应
Posted
技术标签:
【中文标题】如何在网格系统中添加多个元素并使其响应【英文标题】:How add multipe elements in grid system and make it responsive 【发布时间】:2019-02-22 03:38:42 【问题描述】:我是 web 开发新手,尝试在 bootstrap-4 中设计以下屏幕,但无法将其设计为响应式,有人可以描述我如何使用 bootstrap-4 网格系统设计此屏幕。
这是我正在尝试使用网格系统通过使用行和列概念来设计它的图像,它应该是响应式的。
here is my grid picture
这是我的代码:
<div className="row">
<div className="col-md-10">
<div className="row">
<div className="col-md-4">
<div className="fontStyle">
<span className="">1</span>
<!-- <div className="displayBlk"> -->
<label type="text">Select Technology</label>
<select value="" className="selectpicker btn btn-labeled btn-start">
<option value="">None Selected</option>
<option value="">Hello </option>
<option value="">World </option>
</select>
<!-- </div> -->
</div>
</div>
<div className="col-md-4 rowOne">
<div className="fontStyle">
Select Question Type
<button type="button" class="btn btn-primary btn-sm">Code Type</button>
<button type="button" class="btn btn-default btn-sm">Non Code Type</button>
</div>
</div>
<div className="col-md-4">
<div className="fontStyle">
Number Of Questions
<select value="" onChange="" className="selectpicker btn btn-labeled btn-start">
<option value="">Select</option>
<option value="">01</option>
<option value="">02</option>
</select>
</div>
</div>
</div>
<!-- end of 10 col row -->
</div>
<div className="col-md-2">
<span className="">
<button type="button" class="btn btn-outline-primary btn-sm">Reset</button>
</span>
<span>
<button type="button" class="btn btn-primary btn-sm">+</button>
</span>
</div>
这是我设计后的照片。
感谢您的帮助!
【问题讨论】:
【参考方案1】:此链接将对您有所帮助:link
网格系统最多使用 12 列,请记住这一点并相应地划分列。
但是,因为您的元素都在同一行,您应该添加 =>
class="row"
在开始使用网格系统之前。您将通过练习了解网格系统,只需使用列的值即可确定。
更新:
看看-->
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="">1</span>
<label type="text">Select Technology</label>
<select value="" class="selectpicker btn btn-labeled btn-start">
<option value="">None Selected</option>
<option value="">Hello </option>
<option value="">World </option>
</select>
</div>
<div class="col-md-4">
<div class="row">
Select Question Type
<button type="button" class="btn btn-primary btn-sm">Code Type</button><button type="button" class="btn btn-default btn-sm">Non Code Type</button>
</div>
</div>
<div class="col-md-4">
<div className="fontStyle">
Number Of Questions
<select value="" onChange="" className="selectpicker btn btn-labeled btn-start">
<option value="">Select</option>
<option value="">01</option>
<option value="">02</option>
</select>
<span className="">
<button type="button" class="btn btn-outline-primary btn-sm">Reset</button>
</span>
<span>
<button type="button" class="btn btn-primary btn-sm">+</button>
</span>
</div>
</div>
</div>
【讨论】:
实际上我已经使用网格系统设计了这个,但它不是单行的。正如你所说的网格系统使用 12 列我知道并且我有设计但它不适用于中型设备和平板电脑。我将通过提供代码更新我的问题。 是的,我可以帮助你【参考方案2】:@media (max-width:767px)
.bg-light
padding-bottom: 0 !important;
.bg-white
background-color: #f8f9fa !important;
padding-bottom: 1rem !important;
.border-right:nth-child(n+2)
border: none !important;
@media (max-width:991px)
.d-flex.border-right
border: none !important;
<div class="container">
<div class="row my-5">
<div class="col-md-10 col-lg-10 bg-light py-4">
<div class="row px-2">
<div class="d-flex align-items-center px-2 border-right mb-2 col-12 col-lg-4">
<div class="border-right pr-2 mr-1"><p class="font-weight-bold mb-0 text-right w-100">1</p></div>
<div class="w-100"><p class="font-weight-bold mb-0 mr-1">Select Type</p></div>
<div class="w-100">
<select class="form-control">
<option>None Selected</option>
</select>
</div>
</div>
<div class="d-flex align-items-center px-2 border-right mb-2 col-12 col-lg-5">
<p class="w-100 font-weight-bold mb-0 mr-1">Select Type</p>
<p class="w-100 mb-0 mr-1"><a href="#" class="btn btn-block btn-primary">Code Type</a></p>
<p class="w-100 mb-0"><a href="#" class="btn btn-block btn-outline-primary">Non Code Type</a></p>
</div>
<div class="d-flex justify-content-between align-items-center px-2 col-12 col-lg-3">
<div class="w-100"><p class="font-weight-bold mb-0 mr-2">Number of Type</p></div>
<div class="w-100"><select class="form-control">
<option>01</option>
</select></div>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 bg-white py-2 d-md-flex align-items-center">
<div class="d-md-block d-flex d-lg-flex justify-content-between">
<div class="w-100 mr-1 mb-2"><button type="button" class="btn btn-block btn-lg btn-outline-primary">Reset</button></div>
<div class="w-100"><button type="button" class="btn btn-block btn-lg btn-primary">+</button></div>
</div>
</div>
</div>
</div>
【讨论】:
试试这个。 100% 响应以上是关于如何在网格系统中添加多个元素并使其响应的主要内容,如果未能解决你的问题,请参考以下文章