Пытаясь сделать 16 квадратов с помощью bootsrtap, и он не работает, я не знаю почему - PullRequest
Новая
       5

Пытаясь сделать 16 квадратов с помощью bootsrtap, и он не работает, я не знаю почему

0 голосов
/ 07 ноября 2019

Я пытаюсь сделать 16 квадратов на своем сайте с помощью начальной загрузки, но он не работает, и я не знаю почему. я использовал "col-xs-3", но он не устанавливает ширину, пожалуйста, помогите.

PS (конечно, я могу установить ширину в CSS, но я не должен) 

<!DOCTYPE html>
<html>
<head>
  <link rel="icon" href="favicon.png" type="image/x-icon">
  <link rel="stylesheet" href="resources/css/reset.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="resources/css/style.css">
  <title>Match Game</title>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="gameInstructions col-sm-12 col-md-3">
        <h1>Match Game</h1>
        <h2>Rules</h2>
        <p>Click on a card to reveal the number on the other side. Click on a second card to try and find a match to the first. If you succeed, the pair will be removed from play. If not, try again!</p>
        <h2>How To Win</h2>
        <p>You win when all pairs have been found.</p>
      </div>
      <div id="game"class="col-sm-12 col-md-9">
        <div class="row">
          <div class="col-xs-3 card"></div>
          <div class="col-xs-3 card"></div>
          <div class="col-xs-3 card"></div>
          <div class="col-xs-3 card"></div>
          <div class="col-xs-3 card"></div>
          <div class="col-xs-3 card"></div>
          <div class="col-xs-3 card"></div>
          <div class="col-xs-3 card"></div>
          <div class="col-xs-3 card"></div>
          <div class="col-xs-3 card"></div>
          <div class="col-xs-3 card"></div>
          <div class="col-xs-3 card"></div>
          <div class="col-xs-3 card"></div>
          <div class="col-xs-3 card"></div>
          <div class="col-xs-3 card"></div>
          <div class="col-xs-3 card"></div>
        </div>
      </div>
    </div>
  </div>
  <script
    src="https://code.jquery.com/jquery-3.1.1.min.js"
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous"></script>
  <script type="text/javascript" src="./resources/js/match-game.js"></script>
  <script type="text/javascript" src="./resources/js/tests.js"></script>
</body>
</html>

/*"Work Sans" Font*/
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Work Sans'), local('WorkSans-Regular'), url(https://fonts.gstatic.com/s/worksans/v5/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Work Sans Bold'), local('WorkSans-Bold'), url(https://fonts.gstatic.com/s/worksans/v5/QGYpz_wNahGAdqQ43Rh3x4X8mNhN.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 900;
  src: local('Work Sans Black'), local('WorkSans-Black'), url(https://fonts.gstatic.com/s/worksans/v5/QGYpz_wNahGAdqQ43Rh3_4f8mNhN.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*Universal Styling*/
html{
  font-size: 14px;
}

body{
  font-family: "Work Sans", sans-serif;
  background-color: rgb(255,242,242);
  padding-top: 5.25rem;
}

p{
  color: rgb(74, 74, 74);
}

h1{
  font-weight: bold;
  font-size: 2.5rem;
  color: rgb(32, 64, 86);
}

h2{
  font-weight: bold;
  font-size: 1rem;
}

/*Specified Styling*/
.card{
  height: 12.5rem;
  background-color: rgb(153, 153, 153);
  border: 4px solid #fff;
  border-radius: 8px;
}

ожидаемый результат будет 16 квадратов с шириной 25% и высотой 12,5 мм каждый

Ответы [ 4 ]

0 голосов
/ 07 ноября 2019

Инфикс -xs- больше не используется в Bootstrap 4

Это 16 карточных боксов для устройств любой ширины ... 

<div class="row">
  <div class="col-3"><div class="card">1</div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">.. </div></div>
  <div class="col-3"><div class="card">16 </div></div>
</div>

https://www.codeply.com/p/BtOgePpG7n

Похожие: Вертикальные столбцы начальной загрузки на мобильном устройстве

0 голосов
/ 07 ноября 2019

Если ваш ожидаемый результат равен 16 коробкам, предоставьте некоторую ширину вашей карточке класса. 

.card{
    height: 12.5rem;
    width: 30px;
    background-color: rgb(153, 153, 153);
    border: 1px solid black;
    border-radius: 8px;
}
0 голосов
/ 07 ноября 2019

если вы хотите, чтобы ваши шестнадцать ящиков с одинаковой шириной в строке, укажите ширину в исчислении: 

.card{
  width: calc(100% / 16)
  height: 12.5rem;
  background-color: rgb(153, 153, 153);
  border: 4px solid #fff;
  border-radius: 8px;
}
0 голосов
/ 07 ноября 2019

Это потому, что вы не написали текст в своем column. Я просто пишу в нем текст, и там будут отображаться столбцы. Смотрите здесь, я сгенерировал jsfiddle здесь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...