1

嗨，我正在尝试将标签标签、文本和提交输入类型对齐到左侧，并将 17 个总订单对齐到页面右侧，垂直对齐日期标签，水平右对齐段落标签“航运清单每天美国东部时间下午 5 点敲定”。

到目前为止，我已经将标签标签和两个输入标签对齐到我想要的位置，但是跨度标签没有完全对齐到右侧。我正在使用引导程序 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>

4

2 回答 2

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="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>

于 2018-08-29T13:41:38.037 回答
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>

于 2018-07-31T17:54:47.887 回答