Javascript 引导日期范围选择器样式问题

我对使用引导日期范围选择器下拉列表的窗体的样式设置有问题

以下是我想要的两张图片以及我的页面外观：

这是我所做工作的屏幕截图：

下面是我希望表单的外观：

这是我创建的表单的代码：

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


选择时段
选择日期
选择日期范围
您可以使用col md-*类引导

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


选择时段
选择日期
选择日期范围