Bootstrap - точка разрыва для изменения размера экрана не вызывает изменение размера столбца - PullRequest
Новая
       6

Bootstrap - точка разрыва для изменения размера экрана не вызывает изменение размера столбца

0 голосов
/ 30 января 2020

У меня было два класса, для md размера и sm размера. Размер Sm должен был вызывать вертикальное размещение столбцов.

На самом деле, Bootstrap имеет xs в качестве точки разрыва по умолчанию, которая должна вызывать тот же эффект, но ничего не происходит

Если я хочу vertical стекирование, я должен установить columns на 12, и у меня нет других классов для экранов разных размеров.

Код здесь:

https://hastebin.com/uyaboxatuk.js

Ответы [ 2 ]

0 голосов
/ 30 января 2020

Bootstrap Точки останова задают минимальный размер экрана, к которому применяются столбцы.

Например, col-md классы будут применяться только к экранам шириной более 768 пикселей.

См. Полный текст таблица точек останова и их размеров здесь .

Используя ваш код в качестве примера: 

<html>

<head>
  <style>
    .row {
      margin-bottom: 10px;
    }
    
    .a {
      background-color: red;
    }
    
    .b {
      background-color: blue;
    }
    
    .c {
      background-color: green;
    }
    
    .d {
      background-color: gray;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <div class="a row">
      <div class="b col-lg-2">large</div>
      <div class="c col-lg-4">large</div>
      <div class="d col-lg-6">large</div>
    </div>
    <div class="a row">
      <div class="b col-md-2">medium</div>
      <div class="c col-md-4">medium</div>
      <div class="d col-md-6">medium</div>
    </div>
    <div class="a row">
      <div class="b col-sm-2">small</div>
      <div class="c col-sm-4">small</div>
      <div class="d col-sm-6">small</div>
    </div>
  </div>
</body>

</html>
0 голосов
/ 30 января 2020

Возможно, вы скопировали неправильные теги <link> & <script> для Bootstrap. Также следите за своими отступами. Имейте в виду, что лучше сначала поставить теги <link>, а затем теги <script>. Замените ваши <link> & <script> теги на те, что указаны ниже, в точном порядке, и они должны работать нормально. 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
...