В чем разница между col-lg- *, col-md- * и col-sm- * в Bootstrap?
Как насчет
existsCount = int.Parse(cmd.Parameters["successCount"].Value.ToString());
2 ответа
Давайте не усложним Начальную загрузку!
Уведомление, как см седла занимает 100% шириной (в других терминах врывается в новую строку), ниже 576px, но седло не делает. Можно заметить текущую ширину в лучшем центре в gif.
Здесь прибывает код:
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Начальная загрузка по умолчанию выравнивается весь эти столбцы (седло) на сингле строка с равной шириной. В этом случае три col займет 100%/3 ширин каждый, безотносительно размера экрана. Можно заметить это в gif.
Теперь, что, если мы хотим представить только один столбец на строку т.е. дать 100% шириной каждому столбцу, но для меньших экранов только [1 141]? Теперь прибывает эти col-xx классы!
я использовал col-sm, потому что я хотел повредить столбцы в отдельные строки ниже 576 пкс. Эти 4 col-xx классы обеспечиваются Начальной загрузкой для различных дисплеев как мобильные телефоны, планшеты, ноутбуки, большие мониторы и т.д.
Так, col-sm повредились бы ниже 576 пкс, col-md повредится ниже 768 пкс, col-lg повредился бы ниже 992 пкс, и col-xl повредится ниже 1200 пкс
Примечание, что нет никакого
col-xsкласс в начальной загрузке 4.
Это в значительной степени суммирует. Можно вернуться к работе.
<час>, Но существует бит больше к нему. Теперь прибывает col-* и col-xx-* для настройки ширины.
Помнят в вышеупомянутом примере, я упомянул, что col или col-xx берет равную ширину подряд. Таким образом, если мы хотим дать больше ширины определенному col, мы можем сделать это.
строка Начальной загрузки разделена на 12 частей, таким образом, в вышеупомянутом примере было 3 col, таким образом, каждый берет 12/3 = 4 части. Можно рассмотреть эти части как способ измерить ширину.
Мы могли также записать что в формате col-* т.е. col-4 как это:
<div class="row">
<div class="col-4">col</div>
<div class="col-4">col</div>
<div class="col-4">col</div>
</div>
И это не имело бы никакого значения, потому что начальной загрузкой по умолчанию дает равную ширину [1 124] (4 + 4 + 4 = 12).
, Но, что, если мы хотим дать 7 частей 1-му col, 3 части к 2-му col и оставить 2 части (12-7-3 = 2) к 3-му col (7+3+2, таким образом, общее количество равняется 12), мы можем просто сделать это:
<div class="row">
<div class="col-7">col-7</div>
<div class="col-3">col-3</div>
<div class="col-2">col-2</div>
</div>
и можно настроить ширину [1 128] классы также.
<div class="row">
<div class="col-sm-7">col-sm-7</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-2">col-sm-2</div>
</div>
, Как это смотрит в действии?
, Что, если сумма [1 129] является больше чем 12? Тогда эти col будет смещать/корректировать к ниже строки. Да, может быть любое число столбцов для строки!
<div class="row">
<div class="col-12">col-12</div>
<div class="col-9">col-9</div>
<div class="col-6">col-6</div>
<div class="col-6">col-6</div>
</div>
, Что, если мы хотим 3 столбца подряд для больших экранов, но разделяем эти столбцы на [1 182] 2 строки для маленьких экранов?
<div class="row">
<div class="col-12 col-sm">col-12 col-sm TOP</div>
<div class="col col-sm">col col-sm</div>
<div class="col col-sm">col col-sm</div>
</div>
можно играть здесь: https://jsfiddle.net/JerryGoyal/6vqno0Lm /
Ну, Его Подразделения Сетки Начальной загрузки для скорости отклика устройства.
.col-xs-$ Extra Small Screen Phones Less than 768px
.col-sm-$ Small Devices[Tabs] Tablets 768px and Up
.col-md-$ Medium Devices[Laptop screen] Desktops 992px and Up
.col-lg-$ Large Devices Large Desktops 1200px and Up
, Если у Вас есть какой-либо сообщенный мне вопрос.