Попытка поменять порядок тегов меняет функциональность Bootstrap / CSS - PullRequest
Новая
       0

Попытка поменять порядок тегов меняет функциональность Bootstrap / CSS

0 голосов
/ 15 февраля 2019

Я разрабатываю сайт, основанный на хоккее.Я пытался создать «карусель» живых игр (я не использовал Bootstrap 4 carousel).Я хотел перевернуть метки так, чтобы счет всегда был внутри логотипа команды.Когда я это сделал, я получил забавный побочный эффект:

В настоящее время я работаю над стилем, когда область просмотра находится между 786px и 991.98px.Просматривается любым другим способом, и он не будет правильно стилизован.

Игнорируя первое поле (я только менял код для второго блока, обозначенного под комментарием <--- two ---> в коде ниже), вы заметите, чтоблоки очков во втором блоке не совпадают по своему стилю.

Код ниже должен разрешить воссоздание проблемы.(Помимо указания css и img в нужном месте)

Насколько я могу судить, левый блок показателей имеет тег "пробельный текстовый узел"?элемент?это создает пространство между изображением и счетом.Однако с правой стороны этот «пробельный текстовый узел» появляется в div с идентификатором score-md и создает дополнительный фон. 

@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>

1 Ответ

0 голосов
/ 15 февраля 2019

Это происходит потому, что #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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...