Question

我第一次使用Bootstrap 3（最新版本），我体验了经典的填充/边缘头痛Bootstrap似乎为它的新手提供......经过多次努力，在网上，我宣布我的失败并求求你的帮助！

这里是显示我的问题最简单的方法，问题是： - 为什么文本垂直对齐有区别？ - 为什么绿色背景有不同的高度？ - 我如何调整所有宝宝（文字和背景）？

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Problem Tests</title>
  <!-- Bootstrap minimum viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  
  <style>
    /* --- Rebooting all margins and paddings --- */
    .container-fluid, .row, [class*="col-"], h1, ul, li, nav, div {
      margin: 0px;
      padding : 0px;
    }

    h1, li {
      background-color: green;
      font-size: 20px;
    }

    ul {
      list-style-type: none;
    }
  </style>
    
</head>

<body>
  <div class="container-fluid">

    <div class="row">
      <div id="left" class="col-xs-3">
        <div class="row">
          <h1 class="col-xs-12">TEST TITLE</h1>
        </div>
      </div>
      <div id="right" class="col-xs-9">
        <nav class="row">
          <ul>
            <li class="col-xs-12">TEST LINK</li>
          </ul>
        </nav>
      </div>
    </div>

  </div>
</body>

</html>

我认为重写所有引导程序边距和填充都可以解决这个问题，但是......不... ... PLZ帮助和thx阅读！希望这个问题不是太愚蠢（上次我做了一个网站是yeeeears前！）

Answer 1

他们都有不同的行高

h1的行高为22px，而li的行高为28.57714302062988px

如果你使线高匹配，一切都会排成一行。

h1, li {
  background-color: green;
  font-size: 20px;
  line-height: 22px;
}

Answer 2

他们有不同的线高。

h1的{{1}} line-height为1.1 x 1.1。

font-size的{{1}} li为1.42857143 x line-height。

Answer 3

在css重新启动时，您应添加new Random()属性，该属性与对齐文本垂直对齐方式相关。

＆＃13;

line-height

＆＃13;

.container-fluid, .row, [class*="col-"], h1, ul, li, nav, div {
      margin: 0px;
      padding : 0px;
      line-height: 24px;
    }

    h1, li {
      background-color: green;
      font-size: 20px;
    }

    ul {
      list-style-type: none;
    }

＆＃13;

Answer 4

您遇到的问题与保证金或填充没有任何关系。事实上，h1和li元素都有文本，它们都有一个行高属性集，在这种情况下它们的值是不同的。

Bootstrap 3 - 无法移除ul垂直间距

4 个答案: