创建引导程序内联搜索表单

Question

我试图在此图片上创建类似内容：

这是我现在所做的：

Answer 1

＆＃13;

＆＃13;

@import "https://getbootstrap.com/dist/css/bootstrap.min.css";
.boxwrap{ background: rgba(0,0,0,0.5); padding: 20px;}
.form-group{ margin-bottom: 0;}
.col-md-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.col-md-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
.col-md-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}

/* New css */
.boxwrap .form-row>[class*=col-] {
  padding-right: 0px !important;
  padding-left: 0px !important;
}
.boxwrap .form-control{ 
  border-radius: 0px !important;
}

＆＃13;

<div class="boxwrap">
  <div class="form-row">
    <div class="form-group col-md-4">
      
      <input class="form-control" id="inputEmail4" placeholder="Email" type="email">
    </div>  
  <div class="form-group col-md-3"> 
      <select id="inputState" class="form-control">
        <option selected="">Buy</option>
        <option>Buy</option>
      </select> 
  </div> 
  <div class="form-group col-md-4"> 
      <select id="inputState" class="form-control">
        <option selected="">Property Type</option>
        <option>Property Type</option>
      </select> 
  </div> 
  <div class="form-group col-md-1">
     <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;