水平引导4列
水平引导4列
提问于 2018-07-23 22:40:06
我正在尝试使用bootstrap 4的网格系统，我想要3列(每列4列)，我需要以水平的方式使用它们。但我是以垂直的方式获得它的。下面是我的代码：
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4 header-middle">
<input type="text" placeholder="Search Here..." / name="search" required="">
<button type="submit" name=" submit">
<img src ="Images/search.png" width ="48" height ="48"/>
</button>
</div>
<div class="col-md-4 logo_agile">
<h1>
<a href="index.html">
<span>E</span>lite Shoppy
<i class="fa fa-shopping-bag top_logo_agile_bag" aria-hidden="true"></i>
</a>
</h1>
</div>
<div class="col-md-4"></div>
回答 1
Stack Overflow用户
发布于 2018-07-24 00:53:22
这是我想你要找的东西的粗略草稿。它仍然需要在可伸缩性方面进行工作。当你缩小屏幕时，它看起来不会很漂亮。把它弄乱，让它符合你的喜好。如果不需要填充，请删除class="container"。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search Here..." aria-label="Search" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon2"><img src ="Images/search.png" width ="48" height ="48"/></button>
</div>
</div>
</div>
<div class="col-md">
<h1>
<a href="index.html">
<span>E</span>lite Shoppy
<i class="fa fa-shopping-bag top_logo_agile_bag" aria-hidden="true"></i>
</a>
</h1>
</div>
<div class="col-md">
Blank
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51481480
复制相关文章
相似问题
腾讯云开发者
