html - 如何制作具有两个内联字段的组表单？

Question

我正在尝试制作一个带有背景图像的表单。所以这个表格应该是响应式的。但是我无法做到正确。如何放置表单组。两条线

此外，如何在导航栏中的链接之间设置间距？

<div class="col-sm-4" id="search-block">
<div class="form-group">
<select class="form-control" id="destination-picker">
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
</select>
</div>

<div class="form-inline">
  <div class="form-inline">
    <form action="/action_page.php">
      <input onfocus="(this.type='date')" class="js-form-control" placeholder="Arrival">
    </form>
  </div>
  <div class="form-inline">
    <form action="/action_page.php">
      <!-- <input type="date" name="departure"> -->
      <input onfocus="(this.type='date')" class="js-form-control" placeholder="Departure">
    </form>
  </div>
</div>
<div class="travelers-picker form-inline">
  <div class="form-inline">
    <select class="form-control" id="adult">
      <option value="" disabled selected>Adult</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>More</option>
     </select>
    </div>
    <div class="form-inline">
      <select class="form-control" id="child">
        <option value="" disabled selected>Child</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>More</option>
       </select>
     </div>
    </div>
    <div>
      <button type="button" class="btn-search">START SEARCHING</button>           </div>
</div>

表单组示例

[ 1

Answer 1

我看到你在使用 bootstrap...用 bootstrap 格式化很容易

.giveMargins {
  margin-top: 50px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">
  <div class="row giveMargins">
    <div class="col-sm-7">
      <div class="row">
        <div class="col-sm-8 offset-sm-2">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rhoncus, ante pretium posuere vestibulum, quam magna sodales velit, in suscipit tellus dolor ut elit.  
        </div>
      </div>
      <div class="row giveMargins">
        <div class="col-sm-10 offset-sm-2">
          <img src="http://www.nationalgeographic.it/images/2016/12/06/164441083-abc66e5b-8d1b-46d7-a0aa-024b9dea5edb.jpg" 
                  height="200px" width="80%">
        </div>
      </div>
    </div>
    <div class="col-sm-5">
      <div class="row giveMargins">
        <div class="col-sm-12">
          <div class="form-group">
            <select class="form-control" id="destination-picker">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
            </select>
          </div>
        </div>
      </div>
       <div class="row">
        <div class="col-sm-6">
          <div class="form-group">
           <input onfocus="(this.type='date')" class="form-control" placeholder="Arrival">
          </div>
        </div>
         <div class="col-sm-6">
          <div class="form-group">
           <input onfocus="(this.type='date')" class="form-control" placeholder="Arrival">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6">
          <div class="form-group">
           <select class="form-control" id="adult">
                  <option value="" disabled selected>Adult</option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>More</option>
               </select>
          </div>
        </div>
         <div class="col-sm-6">
          <div class="form-group">
           <select class="form-control" id="child">
                  <option value="" disabled selected>Child</option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>More</option>
               </select>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <button type="button" class="btn btn-block btn-search">START SEARCHING</button>
        </div>
      </div>
    </div>
  </div>
</div>