缩小微调器和日期之间的Bootstrap日期和时间选择器右侧空间的大小

Question

我想减少微调器和日期/时间本身之间的空间大小。我正在使用Bootstrap 3/4。原因是我想在屏幕上填写更多字段以便输入数据。

如果我用照片显示最好：

Answer 1

您可以根据需要在css文件中调整宽度

#invdate {
  width: 13rem;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row" class="full-width-div">
    <div class="full-width-div">
      <table class="table table-striped table-bordered table-hover table-condensed">
        <tr>
          <td>
            <input data-mini="true" type="date" value="2017-01-31" name="invdate" id="invdate">
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js "></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js " integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa " crossorigin="anonymous "></script>

否则你可以试试bootstrap datepicker

 $('.input-group.date').datepicker({format: "dd.mm.yyyy"}); 

#filterDate2 {
   width:15rem;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

<div class="container">
  <br />
  <div class="row">
    <div class='col-sm-3'>
      <div class="form-group">
        <div id="filterDate2">
          
          <!-- Datepicker as text field -->         
          <div class="input-group date" data-date-format="dd.mm.yyyy">
            <input  type="text" class="form-control" id="input-dates" placeholder="dd.mm.yyyy">
            <div class="input-group-addon" >
              <span class="glyphicon glyphicon-th"></span>
            </div>
          </div>
          
        </div>    
      </div>
    </div>
  </div>
</div>