html - Form Spacing justify-content-between 一个 到左边和一个 到右边

Question

您好，我正在尝试将 label 标签、文本和提交 input 类型向左对齐，并将总共 17 个订单与页面右侧对齐，垂直对齐带有日期标签并与段落标签“Shipping List is Finalized Everyday at 5pm EST”的结尾水平右对齐。

到目前为止，我已经将 label 标签和两个 input 标签对齐到我想要的位置，但是 span 标签没有对齐完全靠右。我正在使用 Bootstrap 4.1.1。

这是我的代码:

.main {
  margin: 15px 0;
}

.btn-appear {
  color: #000000;
  background-color: #e6e6e6;
  border: 3px solid #b3b3b3;
}

.btn-appear:focus {
  box-shadow: 0 0 0 .1em rgba(186, 208, 226, .5);
}

.btn-appear:active {
  color: #ffffff;
  background-color: #4d4d4d;
  border-color: #bad0e2;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="row main" style="background-color: #ffffff">
  <div class="col-12">
    <h3>Shipping / Loading List</h3>
    <div class="">
      <p class="float-left">Select Shipping / Loading Date</p>
      <p class="float-right">Shipping List is Finalized Everyday at 5pm EST.</p>
    </div>
    <!-- Form code begins -->
    <div class="row container justify-content-between">
      <div class="col-4 row" style="background-color: antiquewhite">
        <form method="post">
          <div class="form-group">
            <!-- Date input -->
            <label class="control-label d-block" for="date">Date:</label>
            <div class="form-inline d-inline-block">
              <input class="form-control" id="date" name="date" size="10" placeholder="MM/DD/YYYY" type="text" />
              <input class="btn btn-appear" name="submit" type="submit" value="Search">
            </div>
          </div>
        </form>
      </div>
      <span class="col-4 text-right" style="background-color: aliceblue">	
	  17 Total Orders for <span id="demo"></span>
      </span>
    </div>
  </div>
</div>

Answer 1

.main{
     margin-top: 15px;
}
 .btn-appear{
     color: #000000;
     background-color: #e6e6e6;
     border: 3px solid #b3b3b3;
}
 .btn-appear:focus{
     box-shadow:0 0 0 .1em rgba(186,208,226,.5);
}
 .btn-appear:active{
     color:#ffffff;
     background-color: #4d4d4d;
     border-color: #bad0e2;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row main" style="background-color: #ffffff">
    <div class="col-12">
      <h3>Shipping / Loading List</h3>
      <p class="float-left">Select Shipping / Loading Date</p>
      <p class="float-right">Shipping List is Finalized Everyday at 5pm EST.</p>
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4" style="background-color: antiquewhite">
      <form method="post">
        <div class="form-group">
          <label class="control-label d-block" for="date">Date:</label>
          <div class="form-inline d-inline-block">	
            <input class="form-control" id="date" name="date" size="12" placeholder="MM/DD/YYYY" type="text"/>
            <input class="btn btn-appear" name="submit" type="submit" value="Search">
          </div>
        </div>
      </form>
    </div>
    <span class="col-4 text-right" style="background-color: aliceblue">	
    17 Total Orders for <span id="demo"></span>
    </span>
  </div>
</div>