对齐col-xs的内容

Question

我有一个col-xs-8列，如下所示：

<div class="col-xs-8">
     <div>Every</div>
     <select id="update-frequency"
              ng-model="retentionSettings.triggers.date.repeat"
              ng-disabled="!retentionSettings.triggers.dateStatus">
          <option value="day">day</option>
          <option value="week">week</option>
          <option value="month">month</option>
      </select>

      <div ng-show="retentionSettings.triggers.date.repeat=='week'">
           <div>on</div>
           <select id="weekDayDropDown" 
                 ng-model="retentionSettings.triggers.date.weekday"
                 ng-disabled="!retentionSettings.triggers.dateStatus">
                 <option ng-repeat="x in weekdaysList()">{{x}}</option>
            </select>
      </div>
</div>

此列的内容与上面的代码段垂直堆起来如下：

我希望水平放置它们。我避免在这个内部使用更多的列，因为间距不适用于单词应该彼此靠近的句子。我如何实现这一目标？

Answer 1

您遇到的问题是“Every”和“on”的div默认为display: block。您可以添加自定义样式来更改显示值以修复此问题，或者您无法使用div，如下所示：

<div class="col-xs-8">
     <span>Every</span>
     <select id="update-frequency"
              ng-model="retentionSettings.triggers.date.repeat"
              ng-disabled="!retentionSettings.triggers.dateStatus">
          <option value="day">day</option>
          <option value="week">week</option>
          <option value="month">month</option>
     </select>

      <span>on</span>
      <select id="weekDayDropDown" 
               ng-model="retentionSettings.triggers.date.weekday"
               ng-disabled="!retentionSettings.triggers.dateStatus">
          <option ng-repeat="x in weekdaysList()">{{x}}</option>
      </select>
</div>