2つのブートストラップ入力グループブロックを次々に置きます

Question

私は2つの日付ピッカーウィジェットを重ねて配置しています。

コード：

<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

私は隣同士にそれらを配置したいと思います。

日付ピッカーウィジェットを並べて配置するコードを変更するにはどうすればよいですか？

Answer 1

次の作業フィドル実行してください： - を

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

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

幸運に役立ちます&希望。

Answer 2

タイトルとアイコンは異なる位置にありますが、これはトリックですか？ ​​

更新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%; 
} 

Answer 3

あなたはこのために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>