将表单和按钮h

Question

我正在使用bootstrap进行样式设计。

我已经成功地将其他东西垂直和水平居中，但没有输入和按钮。

输入和按钮显示在页面左侧。我尝试了不同的bootstrap类选项但无法管理它。

＆＃13;

＆＃13;

body {
  background-color: whitesmoke;
  height: 90%;
  display: flex;
  align-items: center;
}

html {
  height: 90%;
}

.row {
  text-align: center;
}

.random {
  text-decoration: none;
  margin-bottom: 50px;
}

.icon {
  max-width: 25%;
}

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col random">
      <button class="btn btn-primary">
                    <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Click here for a random article</a>
                </button>
    </div>
  </div>
  <div class="row">
    <form class="col icon">
      <input type="text" class="form-control">
    </form>
    <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
  </div>
  <div class="row">
    <div class="col">
      Click icon to search
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

body {
  background-color: whitesmoke;
  height: 90%;
  display: flex;
  align-items: center;
}

html {
  height: 90%;
}

.row {
  text-align: center;
}

.random {
  text-decoration: none;
  margin-bottom: 50px;
}

.icon {
  max-width: 25%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col random">
      <button class="btn btn-primary">
                    <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Click here for a random article</a>
                </button>
    </div>
  </div>

    <form class="col icon">
    <div class="row">
      <input type="text" class="form-control">
    </div>
    <div class="row">
     <div class="col">
    <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>  
     </div>
    </div>
  </form>
  
  
  <div class="row">
    <div class="col">
      Click icon to search
    </div>
  </div>
</div>