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

问题描述 投票：3回答：1

我正在设计一个基于曲棍球的网站。我试图创建一个现场游戏的“旋转木马”（我没有使用Bootstrap 4旋转木马）。我想翻转标签，以便得分始终位于球队徽标的内侧。当我这样做时，我收到了一个时髦的副作用：

当视口介于786px和991.98px之间时，我正在进行样式设计。查看任何其他方式，它将无法正确设置样式。

忽略第一个框（我只是在下面的代码中的注释<--- two --->下面的第二个块上更改代码），您会注意到第二个框中的分数块在其样式中不匹配。

下面的代码应该允许重新创建问题。 （除了将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>
html css bootstrap-4
1个回答
1
投票

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

您可以将display: initial;上的#score-md更改为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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.