对齐 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" 的 div 和 "on" 默认情况下有 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>

对齐 col-xs 的内容

Align contents of col-xs

html

angular-ui-bootstrap