显示内联的面板内的 Div

Question

在我的 angular 应用程序中，我有一个 bootstrap 'panel-body' class，它有两个 div，下面每个包裹用户输入的组件领域。出于某种原因，这些 divs 呈现内联而不是在单独的行上。为什么会发生这种情况以及如何让 divs/components 在不同的行上呈现？

注意：如果我取出 divs 并且只让组件存在而没有 div 包装器，我会得到相同的结果。

<div ng-if="$ctrl.editWorkout" class="panel-body">
 ...
  <div>
    <field-meal-plan-workout-duration
      form="$ctrl.form"
      input-name="time"
      value="$ctrl.workout.duration"
      on-update="$ctrl.workout.duration = value">
    </field-meal-plan-workout-duration>
 </div>
 <div>
   <field-meal-plan-workout-difficulty
      form="$ctrl.form"
      input-name="difficulty"
      value="$ctrl.workout.difficulty"
      on-update="$ctrl.workout.difficulty = value">
    </field-meal-plan-workout-difficulty>
 </div>

Answer 1

使用clear: both; display:block;

Answer 2

创建 class .clear{ clear: 两者;}
设置显示模式为display: block

显示内联的面板内的 Div

Divs inside panel displaying inline

html

css

angularjs

angular-ui-bootstrap