Bootstrap 4 flex-row 大小调整答案

【问题标题】：Bootstrap 4 flex-row SizingBootstrap 4 flex-row 大小调整
【发布时间】：2017-07-17 20:01:59
【问题描述】：

问题：

我正在 bootstrap v4 中构建一个 complex（如果你可以这么称呼它的话）ListGroup。

.flex-row div 底部有一些无法解释的空间，我需要删除它。

我的尝试：

使用 (w-XX) 显式设置宽度并设置 align-items 样式似乎可行，但我觉得我错过了一些东西，我希望它做得对。

PS：即使上面是修复它的正确方法，我仍然想了解那个讨厌的空白以及它为什么存在。

PSS：我是 flexbox 样式的新手，所以不要遗漏“显而易见”的东西。

截图：

片段：

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="row">
  <div class="list-group col-12">
    <div class="list-group-item flex-column d-flex" style="align-items:unset;">
      <h4 class="m-2 list-group-item-heading"><span class="fa fa-fw fa-user"></span>Title Of Person</h4>
      <div class="d-flex flex-row">
        <div class="flex-column w-50">
          <div class="m-2">
            <div class="flex-row d-flex">
              <div class="w-50">
                <strong>Job Title:</strong>
              </div>
              <div class="w-50">
                Job Title
              </div>
            </div>
            <hr/>
          </div>
          <div class="m-2">
            <div class="flex-row d-flex">
              <div class="w-50">
                <strong>Company Name:</strong>
              </div>
              <div class="w-50">
                Comp Name
              </div>
            </div>
            <hr />
          </div>
          <div class="m-2">
            <div class="flex-row d-flex">
              <div class="w-50">
                <strong>Language Preference:</strong>
              </div>
              <div class="w-50">
                ENG
              </div>
            </div>
            <hr />
          </div>
          <div class="m-2">
            <div class="flex-row d-flex">
              <div class="w-50">
                <strong>Birthday:</strong>
              </div>
              <div class="w-50">
                11/11/1990
              </div>
            </div>
            <hr />
          </div>
        </div>
        <div class="flex-column w-50">
          <div class="m-2">
            <div class="flex-row d-flex">
              <div class="w-50">
                <strong>Mobile:</strong>
              </div>
              <div class="w-50">
                0123456789
              </div>
            </div>
            <hr />
          </div>
          <div class="m-2">
            <div class="flex-row d-flex">
              <div class="w-50">
                <strong>E-Mail:</strong>
              </div>
              <div class="w-50">
                email@email.com
              </div>
            </div>
            <hr />
          </div>
          <div class="m-2">
            <div class="flex-row d-flex">
              <div class="w-50">
                <strong>Telephone:</strong>
              </div>
              <div class="w-50">
                0123456789
              </div>
            </div>
            <hr />
          </div>
          <div class="m-2">
            <div class="flex-row d-flex">
              <div class="w-50">
                <strong>Fax:</strong>
              </div>
              <div class="w-50">
                0123456789
              </div>
            </div>
            <hr />
          </div>
        </div>
      </div>
      <div class="m-2">
        <button class="btn btn-outline-primary">
                            <span class="fa fa-fw fa-edit"></span>Edit
                        </button>
        <button class="btn btn-outline-danger">
                            <span class="fa fa-fw fa-remove"></span>Remove
                        </button>
      </div>
    </div>

    }
  </div>

【问题讨论】：

标签： html css twitter-bootstrap flexbox bootstrap-4

【解决方案1】：

这个不需要的空间来自hr 的margin-top。将hr的margin-top设置为0，这个空格就会被删除。

hr {
  margin-top: 0 !important;
}

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="row">
  <div class="list-group col-12">
    <div class="list-group-item flex-column d-flex" style="align-items:unset;">
      <h4 class="m-2 list-group-item-heading"><span class="fa fa-fw fa-user"></span>Title Of Person</h4>
      <div class="d-flex flex-row">
        <div class="flex-column w-50">
          <div class="m-2">
            <div class="flex-row d-flex">
              <div class="w-50">
                <strong>Job Title:</strong>
              </div>
              <div class="w-50">
                Job Title
              </div>
            </div>
            <hr/>
          </div>
          <div class="m-2">
            <div class="flex-row d-flex">
              <div class="w-50">
                <strong>Company Name:</strong>
              </div>
              <div class="w-50">
                Comp Name
              </div>
            </div>
            <hr />
          </div>
          <div class="m-2">
            <div class="flex-row d-flex">
              <div class="w-50">
                <strong>Language Preference:</strong>
              </div>
              <div class="w-50">
                ENG
              </div>
            </div>
            <hr />
          </div>
          <div class="m-2">
            <div class="flex-row d-flex">
              <div class="w-50">
                <strong>Birthday:</strong>
              </div>
              <div class="w-50">
                11/11/1990
              </div>
            </div>
            <hr />
          </div>
        </div>
        <div class="flex-column w-50">
          <div class="m-2">
            <div class="flex-row d-flex">
              <div class="w-50">
                <strong>Mobile:</strong>
              </div>
              <div class="w-50">
                0123456789
              </div>
            </div>
            <hr />
          </div>
          <div class="m-2">
            <div class="flex-row d-flex">
              <div class="w-50">
                <strong>E-Mail:</strong>
              </div>
              <div class="w-50">
                email@email.com
              </div>
            </div>
            <hr />
          </div>
          <div class="m-2">
            <div class="flex-row d-flex">
              <div class="w-50">
                <strong>Telephone:</strong>
              </div>
              <div class="w-50">
                0123456789
              </div>
            </div>
            <hr />
          </div>
          <div class="m-2">
            <div class="flex-row d-flex">
              <div class="w-50">
                <strong>Fax:</strong>
              </div>
              <div class="w-50">
                0123456789
              </div>
            </div>
            <hr />
          </div>
        </div>
      </div>
      <div class="m-2">
        <button class="btn btn-outline-primary">
                            <span class="fa fa-fw fa-edit"></span>Edit
                        </button>
        <button class="btn btn-outline-danger">
                            <span class="fa fa-fw fa-remove"></span>Remove
                        </button>
      </div>
    </div>

    }
  </div>

【讨论】：

【解决方案2】：

神秘的底部空白是因为list-group-item 有flex-flow: row wrap。只需使用flex-nowrap 类来防止这种情况...

https://www.codeply.com/go/Hqseq6OTQd

<div class="list-group-item flex-column d-flex flex-nowrap align-items-stretch">
  ...
</div>

此外，内列中的flex-column 不会做任何事情，除非您还包括d-flex 以使其成为display:flex。也许没有必要。

【讨论】：