Я пытаюсь создать краткую сводку по предстоящему веб-приложению, есть несколько коротких <labels>
и некоторые очень длинные, в зависимости от предпочтений пользователя, в настоящее время я использую Bootstrap Grid Layout с базовой структурой, подобной этой:
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<label class="post-label">Department</label>
</div>
<div class="col-sm-6">
<label class="details-label">Product Design</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<label class="post-label">Long Label Very Long Label Long Label Very Long Label Long
Label Very Long Label Long Label Very Long Label</label>
</div>
<div class="col-sm-6">
<label class="details-label">Short Detail</label>
</div>
</div>
</div>
</div>
</div>
Это привело к несбалансированному макету, как это исправить ?, Я попытался clearfix
каждой строке, и я также попытался датьполный height
каждого <label>
, но он не выравнивается должным образом, прикрепляя скриншот того, как выглядит макет в данный момент.
Макет с использованием Bootstrap Grid
Границы предназначены только для каркаса и дают правильное представление о макете