Bootstrap 4 новичка: col-sm-12 не имеет ширины 100% на смартфонах - что я делаю не так? - PullRequest
Новая
       5

Bootstrap 4 новичка: col-sm-12 не имеет ширины 100% на смартфонах - что я делаю не так?

0 голосов
/ 23 сентября 2019

Определение точек останова SASS: 

/* For the grid */
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1440px,
    xxxl: 1660px
);

Мои столбцы выглядят так: 

<div id="footer_lower_menus" class="row">
    <div class="fui_col col col-sm-12 col-md-6 col-lg-4">
        ...
    </div>
    <div class="fui_col col col-sm-12 col-md-6 col-lg-4">
        ...
    </div>
    <div class="fui_col col col-sm-12 col-md-6 col-lg-4">
        ...
    </div>
</div>

Ожидаемый результат: Размер столбцов должен составлять одну треть от размера lg (и больше как xl), половина на размер md и полная ширина на размер sm (или меньше как xs).

Фактический результат: Для больших размеров это работает, но для размеров меньшихчем sm (xs, который, по-видимому, не компилируется, поскольку равен нулю), столбцы снова становятся на половину или треть (не принимая ни одного из определений?).

Примечание. Содержимое содержит текст и кажетсямаксимальная ширина 100%.

Что я здесь не так делаю?Как применить «см или меньше» вместо «только см»?

1 Ответ

2 голосов
/ 23 сентября 2019

Удалите col из списка классов, запустите ваш код и снова проверьте, что он даст вам полноформатное содержимое.

Причина удаления класса col состоит в том, что он делит вашу строку на равные части,Это означает, что если вы используете <div class="col">text</div> 5 раз в одной строке, это разделит ваше пространство строк поровну - это означает, что каждый col будет иметь ширину 20%. 

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Teste</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
  <div class="container-fluid">
    <div id="footer_lower_menus" class="row">
      <div class="fui_col col-sm-12 col-md-6 col-lg-4">
        fui_col 1
      </div>
      <div class="fui_col col-sm-12 col-md-6 col-lg-4">
        fui_col 2
      </div>
      <div class="fui_col col-sm-12 col-md-6 col-lg-4">
        fui_col 3
      </div>
    </div>
  </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...