razor - 如何防止 bootstrap 4 列在较短的文本上缩小？

Question

我有一个带有三列网格的剃须刀页面，例如：

@for (int i = 0; i < Model.Questions.Count; i++)
{
<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 align-self-center order-first">Question Text</div>
  <div class="col-xs-12 col-sm-8 col-md-8 col-lg-4 align-self-center">Fixed Width Table</div>
  <div class="col-xs-12 col-sm-4 col-md-4 col-lg-2 align-self-center order-last">Other Text</div>
</div>
}

第一列中的文字足够长，可以在 lg 屏幕大小中延伸超过 2 行，并且一切都很好并且排列整齐。但是在某些问题上，文本很短，第一列缩小了，导致对齐不正常。

我怎样才能解决这个问题？

附上截图（这是阿拉伯语，页面处理的语言之一，显然比英语更紧凑......）。

标签： razorflexboxbootstrap-4

Answer 1

我所遇到的问题已通过两种措施得到解决，我将在此处记录这些措施，以帮助任何对 bootstrap 4 列有类似“奇怪”​​问题的人。

a) 不要在行或列的 div 上设置边距。b) 对包含可变长度内容的列的行使用 .w-100。