Сводная компоновка не идеально выровнена при использовании boostrap 3 Grid layout - PullRequest
0 голосов
/ 21 октября 2019

Я пытаюсь создать краткую сводку по предстоящему веб-приложению, есть несколько коротких <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

Границы предназначены только для каркаса и дают правильное представление о макете

...