面板内显示内联的 div答案

【问题标题】：Divs inside panel displaying inline面板内显示内联的 div
【发布时间】：2017-09-21 16:45:59
【问题描述】：

在我的 Angular 应用程序中，我有一个引导程序“panel-body”类，其中包含两个 div，每个 div 都包含作为用户输入字段的组件。出于某种原因，这些 div 呈现内联而不是单独的行。为什么会发生这种情况？如何让 div/组件在不同的行上呈现？

注意：如果我取出 div 并让组件在那里没有 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>

【问题讨论】：

使用 'clear: both;显示：块；'在您想要分离的每个元素上。
非常感谢。这解决了它。你知道为什么 div 是内联渲染的吗？
不客气。请投票/接受我的回答。 :)
我的错，div默认是块显示的

标签： html css angularjs angular-ui-bootstrap

【解决方案1】：

使用 clear: both;显示：块；

【讨论】：

【解决方案2】：

创建类 .clear{ clear: both;}
设置显示模式为 display: block

【讨论】：