html - 尝试交换标签的顺序会改变 Bootstrap/CSS 的功能

标签 html css bootstrap-4

我正在设计一个基于 Hockey 的网站。我试图创建一个实时游戏的“轮播”(我没有使用 Bootstrap 4 轮播)。我想翻转标签，以便分数始终位于团队 Logo 的内部。当我这样做时，我收到了一个奇怪的副作用:

我目前正在处理视口(viewport)介于 786 像素和 991.98 像素之间时的样式。以任何其他方式查看，它的样式将不正确。

忽略第一个框(我只是更改了下面代码中注释 <--- two ---> 下表示的第二个 block 的代码)，您会注意到第二个框中的得分块的样式不匹配。

下面的代码应该可以重现问题。 (除了将 css 和 img 指向正确的位置)

据我所知，左边的记分栏有一个“空白文本节点”标签？元素？在图像和乐谱之间创建空间。然而，在右侧，这个“空白文本节点”出现在 ID 为 score-md 的 div 中，并创建了额外的背景。

@media (max-width: 575.98px) {
    #gameCards {
        display: none;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    #gameCards {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #gameCards {
        display: initial;
    }
    .team-thumbnail {
        width: 20px;
        height: 20px;
    }
    #score-md {
        width: 20px;
        height: 20px;
    }
    #teamScore-md {
        display: initial;
    }
    #teamScore-lg {
        display: none;
    }
    #score-md {
        display: initial;
        font-weight: bold;
    }
    #gameTime {
        font-weight: bold;
        font-size: 12px;
    }
    .helper {
        width: 1px;
        height: 1px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    #score-lg {
        display: initial;
    }
    #teamScore-md {
        display: none;
    }
}

#teamScore, #teamScore-lg, #teamScore-md {
    border-width: 2px !important;
}

#gameCards {
    max-width: 100% !important;
    max-height: 200px;
}

.games-group>.row {
    overflow-x: auto;
    white-space: nowrap;
}

.games-group>.row>.col-md-3 {
    display: inline-block;
    float: none;
}

.games-group>.row>.col-lg-2 {
    display: inline-block;
    float: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Customized CSS/Fonts/ETC. -->
    <link href="https://fonts.googleapis.com/css?family=Fira+Mono" rel="stylesheet">
   

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>AStats Hockey</title>
</head>

<body>

    <div id="gameCards" class="container games-group">
        <div class="row text-center bg-secondary flex-nowrap">
            <div class="col-md-3 col-lg-2 card bg-secondary border-light p-1">
                <div class="card-body p-0">
                    <h6 class="card-title text-white mb-1">NYR at NYR</h6>
                    <div class="row mx-0">
                        <div class="col-4 p-0">
                            <div id="teamScore-md"
                                class="row justify-content-center rounded bg-light border border-dark p-1 m-0">
                                <img class="team-thumbnail mb-0"
                                    src="../../assets/img/teams/New_York_Rangers.svg"></img>
                                <div id="score-md" class="rounded bg-dark">
                                    <span class="align-top text-white">0</span>
                                </div>
                            </div>
                            <div id="teamScore-lg"
                                class="row justify-content-center rounded bg-light border border-dark p-1 m-0">
                                <img class="team-thumbnail mb-0"
                                    src="../../assets/img/teams/New_York_Rangers.svg"></img>
                                <div id="score-lg" class="rounded bg-dark">
                                    <span id="score-lg" class="rounded bg-dark text-white p-1">0</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-4 p-0 my-auto">
                            <div id="gameTime" class="row rounded bg-dark justify-content-center m-0 p-0">
                                <p class="text-white m-0">End 3rd</p>
                                <p class="text-white m-0">00:00</p>
                            </div>
                        </div>
                        <div class="col-4">
                            <div id="teamScore-md"
                                class="row justify-content-center rounded bg-light border border-dark p-1 m-0">
                                <img class="team-thumbnail mb-0"
                                    src="../../assets/img/teams/New_York_Rangers.svg"></img>
                                <div id="score-md" class="rounded bg-dark">
                                    <span class="align-top text-white">0</span>
                                </div>
                            </div>
                            <div id="teamScore-lg"
                                class="row justify-content-center rounded bg-light border border-dark p-1 m-0">
                                <div id="score-lg" class="rounded bg-dark">
                                    <span id="score-lg" class="rounded bg-dark text-white p-1">0</span>
                                </div>
                                <img class="team-thumbnail mb-0"
                                    src="../../assets/img/teams/New_York_Rangers.svg"></img>
                                <div id="score-md" class="rounded bg-dark">
                                    <span class="align-top text-white">0</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- two -->
            <div class="col-md-3 col-lg-2 card bg-secondary border-light p-1">
                <div class="card-body p-0">
                    <h6 class="card-title text-white mb-1">NYR at NYR</h6>
                    <div class="row mx-0">
                        <div class="col-4 p-0 m-auto">
                            <div id="teamScore-md"
                                class="row justify-content-center rounded bg-light border border-dark p-1 m-0">
                                <img class="team-thumbnail mb-0"
                                    src="../../assets/img/teams/New_York_Rangers.svg"></img>
                                <div id="score-md" class="rounded bg-dark px-1">
                                    <span class="text-white">0</span>
                                </div>
                            </div>
                            <div id="teamScore-lg"
                                class="row justify-content-center rounded bg-light border border-dark p-1 m-0">
                                <img class="team-thumbnail mb-0"
                                    src="../../assets/img/teams/New_York_Rangers.svg"></img>
                                <div id="score-lg" class="rounded bg-dark">
                                    <span id="score-lg" class="rounded bg-dark text-white p-1">0</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-4 p-0 m-auto">
                            <div id="gameTime" class="row rounded bg-dark justify-content-center m-0 p-0">
                                <p class="text-white m-0">End 3rd</p>
                                <p class="text-white m-0">00:00</p>
                            </div>
                        </div>
                        <div class="col-4 p-0 m-auto">
                            <div id="teamScore-md"
                                class="row justify-content-center rounded bg-light border border-dark p-1 m-0">
                                <div id="score-md" class="rounded bg-dark px-1">
                                    <span class="text-white">0</span>
                                </div>
                                <img class="team-thumbnail mb-0"
                                    src="../../assets/img/teams/New_York_Rangers.svg"></img>
                            </div>
                            <div id="teamScore-lg"
                                class="row justify-content-center rounded bg-light border border-dark p-1 m-0">
                                <div id="score-lg" class="rounded bg-dark">
                                    <span id="score-lg" class="rounded bg-dark text-white p-1">0</span>
                                </div>
                                <img class="team-thumbnail mb-0"
                                    src="../../assets/img/teams/New_York_Rangers.svg"></img>
                                <div id="score-md" class="rounded bg-dark">
                                    <span class="align-top text-white">0</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- Popper.js, then Bootstrap JS -->
    <script defer src="https://use.fontawesome.com/releases/v5.7.1/js/all.js"
        integrity="sha384-eVEQC9zshBn0rFj4+TU78eNA19HMNigMviK/PU/FFjLXqa/GKPgX58rvt5Z8PLs7"
        crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

</body>

</html>

最佳答案

发生这种情况是因为 #score-md 具有 display: inline;，并且内联元素中的空格(包括换行符)显示为......好吧，空格。

您可以将 #score-md 上的 display: initial; 更改为 display: inline-block;，但这会破坏您的布局一点点。

最简单的解决方法是从 #score-md 中删除所有空格，因此基本上更改为:

<div id="score-md" class="rounded bg-dark px-1">
  <span class="text-white">0</span>
</div>

为此:

<div id="score-md" class="rounded bg-dark px-1"><span class="text-white">0</span</div>

检查下面的片段以了解其工作原理。 另请注意，我已经修剪了您的 @media 查询以使示例更易于理解。

#gameCards {
  display: initial;
}

.team-thumbnail {
  width: 20px;
  height: 20px;
}

#score-md {
  width: 20px;
  height: 20px;
}

#teamScore-md {
  display: initial;
}

#teamScore-lg {
  display: none;
}

#score-md {
  display: initial;
  font-weight: bold;
}

#gameTime {
  font-weight: bold;
  font-size: 12px;
}

.helper {
  width: 1px;
  height: 1px;
}

#teamScore,
#teamScore-lg,
#teamScore-md {
  border-width: 2px !important;
}

#gameCards {
  max-width: 100% !important;
  max-height: 200px;
}

.games-group>.row {
  overflow-x: auto;
  white-space: nowrap;
}

.games-group>.row>.col-md-3 {
  display: inline-block;
  float: none;
}

.games-group>.row>.col-lg-2 {
  display: inline-block;
  float: none;
}
<!-- Customized CSS/Fonts/ETC. -->
<link href="https://fonts.googleapis.com/css?family=Fira+Mono" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div id="gameCards" class="container games-group">
  <div class="row text-center bg-secondary flex-nowrap">
    <!-- Card with whitespaces -->
    <div class="col-md-3 col-lg-2 card bg-secondary border-light p-1">
      <div class="card-body p-0">
        <h6 class="card-title text-white mb-1">Whitespace</h6>
        <div class="row mx-0">
          <div class="col-4 p-0 m-auto">
            <div id="teamScore-md" class="row justify-content-center rounded bg-light border border-dark p-1 m-0">
              <img class="team-thumbnail mb-0" src="//upload.wikimedia.org/wikipedia/commons/a/ae/New_York_Rangers.svg">
              <div id="score-md" class="rounded bg-dark px-1">
                <span class="text-white">0</span>
              </div>
            </div>
          </div>
          <div class="col-4 p-0 m-auto">
            <div id="gameTime" class="row rounded bg-dark justify-content-center m-0 p-0">
              <p class="text-white m-0">End 3rd</p>
              <p class="text-white m-0">00:00</p>
            </div>
          </div>
          <div class="col-4 p-0 m-auto">
            <div id="teamScore-md" class="row justify-content-center rounded bg-light border border-dark p-1 m-0">
              <div id="score-md" class="rounded bg-dark px-1">
                <span class="text-white">0</span>
              </div>
              <img class="team-thumbnail mb-0" src="//upload.wikimedia.org/wikipedia/commons/a/ae/New_York_Rangers.svg">
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Card without whitespaces -->
    <div class="col-md-3 col-lg-2 card bg-secondary border-light p-1">
      <div class="card-body p-0">
        <h6 class="card-title text-white mb-1">No whitespace</h6>
        <div class="row mx-0">
          <div class="col-4 p-0 m-auto">
            <div id="teamScore-md" class="row justify-content-center rounded bg-light border border-dark p-1 m-0">
              <img class="team-thumbnail mb-0" src="//upload.wikimedia.org/wikipedia/commons/a/ae/New_York_Rangers.svg">
              <!-- This inline div is what caused the problem -->
              <div id="score-md" class="rounded bg-dark px-1"><span class="text-white">0</span></div>
            </div>
          </div>
          <div class="col-4 p-0 m-auto">
            <div id="gameTime" class="row rounded bg-dark justify-content-center m-0 p-0">
              <p class="text-white m-0">End 3rd</p>
              <p class="text-white m-0">00:00</p>
            </div>
          </div>
          <div class="col-4 p-0 m-auto">
            <div id="teamScore-md" class="row justify-content-center rounded bg-light border border-dark p-1 m-0">
              <!-- This inline div is what caused the problem -->
              <div id="score-md" class="rounded bg-dark px-1"><span class="text-white">0</span></div>
              <img class="team-thumbnail mb-0" src="//upload.wikimedia.org/wikipedia/commons/a/ae/New_York_Rangers.svg">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Optional JavaScript -->
<!-- Popper.js, then Bootstrap JS -->
<script defer src="https://use.fontawesome.com/releases/v5.7.1/js/all.js" integrity="sha384-eVEQC9zshBn0rFj4+TU78eNA19HMNigMviK/PU/FFjLXqa/GKPgX58rvt5Z8PLs7" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

关于html - 尝试交换标签的顺序会改变 Bootstrap/CSS 的功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54702204/

上一篇：html - 为什么有些 URL 在 Web 浏览器中查看图像，有些只是触发文件下载？

下一篇：html - 根据固定 sibling 设置高度

相关文章：

html - bootstrap 4 (alpha 6) 中的全宽轮播

javascript - 使用 AngularJS 进行验证

javascript - 最大宽度和最大高度未按预期工作

html - 在表单内排列输入

javascript - 试图控制同步轮播

javascript - 随机化所有字符串字符的大写/小写

css - Stylelint 不会在 VSCode 中标记错误

html - 为什么 CSS[margin-right] 没有在 html 中应用？

html - 悬停时展开顶部栏以显示导航链接

css - 小屏幕上 3 个 div 的不同 flexbox 对齐方式

©2024 IT工具网  联系我们