Question

我正在尝试使用引导程序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>

Answer 1

以下是我认为您要寻找的内容的草稿。它仍然需要扩展方面的工作。当您缩小屏幕时，它看起来不会很漂亮。乱七八糟，让它符合您的喜好。如果您不希望填充，请删除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>

水平Bootsrap 4列

1 个答案: