Divs im Panel inline anzeigen

Question

In meiner eckigen App habe ich eine Bootstrap 'Panel-Body' -Klasse, die die zwei divs enthält, unter denen jeweils Komponenten, die Benutzereingabefelder sind umhüllen. Aus irgendeinem Grund werden diese Divs inline und nicht in separaten Zeilen gerendert. Warum passiert das und wie bekomme ich die Divs/Komponenten in separaten Zeilen rendern?

hinweis: wenn ich die divs herausnehmen und nur die komponenten dort ohne div wrapper haben, bekomme ich das gleiche ergebnis.

<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

Verwendung klar: beide; Bildschirmsperre;

Answer 2

• schaffen Klasse .clear {clear: both;}
• Set-Anzeigemodus wie display: block