在一行中显示按钮、日期范围选择器和标签，不留空格

Question

我想要在一行中对齐标签、按钮和日期范围选择器，以便它看起来很好。这是我的代码。我试着这样做，但没有帮助对齐和看起来很好。如果你能指导我，那就太好了。谢谢。

​

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.css" integrity="sha512-gp+RQIipEa1X7Sq1vYXnuOW96C4704yI1n0YB9T/KqdvqaEgL6nAuTSrKufUX3VBONq/TPuKiXGLVgBKicZ0KA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js" integrity="sha512-mh+AjlD3nxImTUGisMpHXW03gE6F4WdQyvuFRkjecwuWLwD2yCijw4tKA3NsEFpA1C3neiKhGXPSIGSfCYPMlQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/moment.min.js" integrity="sha512-i2CVnAiguN6SnJ3d2ChOOddMWQyvgQTzm0qSgiKhOqBMGCx4fGU5BtzXEybnKatWPDkXPFyCI0lbG42BnVjr/Q==" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">

    <div class="col-lg-2 col-md-3 col-sm-3 col-xs-12">
      <label style="font-weight: normal !important;"> Date range :</label>
    </div>

    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 input-group" style="float:left;">
      <input type="text" name="daterange" class="form-control" placeholder="mm/dd/yyyyy - mm/dd/yyyy" />
      <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    </div>

    <div class='col-lg-2 col-md-2 col-sm-2 col-xs-12'>
      <button class="btn btn-default pull-right" id="btnSearch" type="button"><span class="fa fa-search"></span>
                Search</button>
    </div>
    <div class='col-lg-2 col-md-2 col-sm-2 col-xs-12'>
      <button type="button" id="btnClearSearch" class="btn btn-primary">Clear Search</button>
    </div>

  </div>
</div>

​

我的输出：

​

我想要的是：

​

​

Answer 1

将标签和范围放在一列中，将按钮放在另一列中

​

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.css" integrity="sha512-gp+RQIipEa1X7Sq1vYXnuOW96C4704yI1n0YB9T/KqdvqaEgL6nAuTSrKufUX3VBONq/TPuKiXGLVgBKicZ0KA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js" integrity="sha512-mh+AjlD3nxImTUGisMpHXW03gE6F4WdQyvuFRkjecwuWLwD2yCijw4tKA3NsEFpA1C3neiKhGXPSIGSfCYPMlQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/moment.min.js" integrity="sha512-i2CVnAiguN6SnJ3d2ChOOddMWQyvgQTzm0qSgiKhOqBMGCx4fGU5BtzXEybnKatWPDkXPFyCI0lbG42BnVjr/Q==" crossorigin="anonymous"></script>

 <div class="container-fluid">
  <div class="row">

  

    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 input-group" style="float:left;">
       <label style="font-weight: normal !important;" class="mr-2"> Date range :</label>
      <input type="text" name="daterange" class="form-control" placeholder="mm/dd/yyyyy - mm/dd/yyyy" />
      <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    </div>

    <div class='col-lg-6 col-md-6 col-sm-6 col-xs-12 pl-0'>
      <button class="btn btn-default pull-right mr-2" id="btnSearch" type="button"><span class="fa fa-search"></span>
                Search</button>
      <button type="button" id="btnClearSearch" class="btn btn-primary">Clear Search</button>
    </div>

  </div>
</div>

​

Answer 2

您可以删除所有<div>列的填充，这将删除它们之间的空格。例如：

<div class="col-lg-2 col-md-3 col-sm-3 col-xs-12" style="padding:0px;">
  <label style="font-weight: normal !important;"> Date range :</label>
</div>

Answer 3

你能检查一下下面的代码吗？希望它能为你工作。对于您所需的输出，我们删除了引导网格类(row、col-*)。在flex实用程序的帮助下，我们可以很容易地满足需求，这个解决方案在响应性方面也工作得很好。

请访问此链接：https://jsfiddle.net/yudizsolutions/dk1my978/

​

.date-selection>* {
  margin: 6px;
}

.input-box label {
  margin-right: 6px;
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
}

.input-box input {
  min-width: 280px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.css" integrity="sha512-gp+RQIipEa1X7Sq1vYXnuOW96C4704yI1n0YB9T/KqdvqaEgL6nAuTSrKufUX3VBONq/TPuKiXGLVgBKicZ0KA==" crossorigin="anonymous"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js" integrity="sha512-mh+AjlD3nxImTUGisMpHXW03gE6F4WdQyvuFRkjecwuWLwD2yCijw4tKA3NsEFpA1C3neiKhGXPSIGSfCYPMlQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/moment.min.js" integrity="sha512-i2CVnAiguN6SnJ3d2ChOOddMWQyvgQTzm0qSgiKhOqBMGCx4fGU5BtzXEybnKatWPDkXPFyCI0lbG42BnVjr/Q==" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="date-selection d-flex flex-wrap align-items-center justify-content-center">

    <div class="input-box d-flex align-items-center">
      <label style="font-weight: normal !important;"> Date range :</label>
      <input type="text" name="daterange" class="form-control" placeholder="mm/dd/yyyyy - mm/dd/yyyy" />
      <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    </div>


    <button class="btn btn-default pull-right" id="btnSearch" type="button"><span class="fa fa-search"></span>
      Search</button>
    <button type="button" id="btnClearSearch" class="btn btn-primary">Clear Search</button>

  </div>
</div>

​