Bootstrap 4 flex-row Sizing

时间：2017-07-17 10:35:54

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

问题：

我正在 bootstrap v4 中构建一个复杂（如果你可以称之为）ListGroup。

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

我尝试过的事情：

使用（w-XX）明确设置宽度并设置align-items样式似乎有效，但我觉得我错过了一些东西，我希望它能正确完成。

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

PSS：我是Flexbox造型的新手，所以不要忽视＆＃34;显而易见的＆＃34;的东西。

截图：

alt text

alt text

段：

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

这个不受欢迎的空间来自hr＆＃39; margin-top。将hr＆＃39; margin-top设为0，此空格将被删除。

＆＃13;
＆＃13; 
hr {
  margin-top: 0 !important;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

底部的空白之谜是因为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，否则不会执行任何操作。也许没有必要。

相关问题
最新问题