ブートストラップ日付範囲ピッカースタイリングの問題

Question

ブートストラップの日付範囲ピッカードロップダウンを使用するフォームのスタイリングに問題があります。

この私がやったことのためのスクリーンショットです：

そして、ここでは、私はフォームが見えるようにしたいものです。ここで

は私がしたいことは、どのようにのように私のページを見ていることを2枚の画像があります

これは私が作成したフォームのコードです：

<div class="form-group" style="border: 1px solid"> 
       <div class="row"> 
       <div class="radio"> 
       <label><input type="radio" name="optradio">Select Period 
       </label> 
       </div> 
       <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;"> 
       <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp; 
       <span></span> <b class="caret"></b> 
      </div> 
      </div> 
      <div class="row"> 
      <div class="radio"> 
       <label><input type="radio" name="optradio">Select Date</label> 
      </div> 
      </div> 
      <div class="row"> 
      <div class="radio"> 
       <label><input type="radio" name="optradio">Select Date Range</label> 
      </div> 
      </div> 
      </div> 

Answer 1

あなたは、ブートストラップ

<div class="form-group" style="border: 1px solid"> 
     <div class="row"> 
      <div class="col-md-2"> 
      <div class="radio"> 
       <label><input type="radio" name="optradio">Select Period</label> 
      </div> 
      </div> 
      <div class="col-md-3"> 
      <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%"> 
       <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp; 
      <span></span> <b class="caret"></b> 
      </div> 
      </div> 
     </div> 

     <div class="row"> 
     <div class="col-md-2"> 
      <div class="radio"> 
       <label><input type="radio" name="optradio">Select Date</label> 
      </div> 
      </div> 
     </div> 

     <div class="row"> 
     <div class="col-md-2"> 
      <div class="radio"> 
      <label><input type="radio" name="optradio">Select Date Range</label> 
      </div> 
     </div> 
     </div> 
    </div> 

Answer 2

私はちょうど手足の外に出ています、もしあなたがフィドルを含んでいれば、助けになるでしょうが、私の最初の推測はあなたですおそらくあなたのform-groupの内容を行に投げたい：

<div class="row"> 
    <div class="col-12"> 
    <div class="form-group" style="border: 1px solid"> 
       <div class="row"> 
       <div class="radio"> 
       <label><input type="radio" name="optradio">Select Period 
       </label> 
       </div> 
       <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;"> 
       <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp; 
       <span></span> <b class="caret"></b> 
      </div> 
      </div> 
      <div class="row"> 
      <div class="radio"> 
       <label><input type="radio" name="optradio">Select Date</label> 
      </div> 
      </div> 
      <div class="row"> 
      <div class="radio"> 
       <label><input type="radio" name="optradio">Select Date Range</label> 
      </div> 
      </div> 
      </div> 
     </div> 
    </div>