Form Spacing justify-content-between one <div> to left and one <span> to the right

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>

Answer 2

抱歉，我花了这么长时间才回复我的解决方案。我实际上改变了很多。这是我的解决方案：

.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="container">
  <div class="row main">
    <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>  
  <!-- Form code begins -->
  <div class="row main justify-content-between">
    <div class="col-4">
      <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 name="date" class="form-control" id="date" type="text" size="12" placeholder="MM/DD/YYYY">
            <input name="submit" class="btn btn-appear" type="submit" value="Search">
          </div>
        </div>
      </form>
    </div>
    <div class="col-4 text-right"> 
      17 Total Orders for <span id="demo">Wed Aug 29 2018</span>
    </div>
  </div>
</div>

Form Spacing justify-content-between one <div> to left and one <span> to the right

Form Spacing justify-content-between one <div> to left and one <span> to the right

html

css

forms

justify

bootstrap-4