将2个Bootstrap输入组块彼此相邻放置

Question

我有两个日期选择器小部件放在一起。

代码：

<div class="input-group datetimepicker" id="input-start-date">
    <span class="input-group-addon" id="addon-event">Start</span>
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
</div>
<div class="input-group datetimepicker" id="input-end-date">
    <span class="input-group-addon" id="addon-event">End</span>
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
</div>

小提琴： https://jsfiddle.net/gz5p8s18

我想把它们放在一起。

如何更改代码以将datepicker小部件并排放置？

Answer 1

请运行以下工作小提琴： -

＆＃13;

＆＃13;

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
<div class="row">
   <div class="col-md-6 col-sm-6 col-xs-6">
   
   
   <div class="input-group datetimepicker" id="input-start-date">
        <span class="input-group-addon" id="addon-event">Start</span>
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
    </div>
   </div>
      <div class="col-md-6 col-sm-6 col-xs-6">
   <div class="input-group datetimepicker"  id="input-end-date">
        <span class="input-group-addon" id="addon-event">End</span>
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
    </div>
       </div>

＆＃13;

＆＃13;

＆＃13;

祝你好运＆amp;希望有所帮助。

Answer 2

您可以使用Bootstrap Grid System：https://jsfiddle.net/dgyejw5o/

<div class="row">
  <div class="col-xs-6">
    <div class="input-group datetimepicker" id="input-start-date">
      <span class="input-group-addon" id="addon-event">Start</span>
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
    </div>
  </div>
  <div class="col-xs-6">
    <div class="input-group datetimepicker" id="input-end-date">
      <span class="input-group-addon" id="addon-event">End</span>
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
    </div>
  </div>
</div>

Answer 3

标题和图标位于不同的位置，但是这样可以解决吗？ https://jsfiddle.net/gz5p8s18/1/

更新了HTML：

<div class="wrapper">
  <div class="input-group datetimepicker" id="input-start-date">
      <span class="input-group-addon" id="addon-event">Start</span>
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
  </div>
  <div class="input-group datetimepicker" id="input-end-date">
      <span class="input-group-addon" id="addon-event">End</span>
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
  </div>
</div>

CSS：

.wrapper {
  width: 100%;
  display: table;
}
.datetimepicker {
  display: table-cell;
  width: 50%;
}