Nano Hash - криптовалюты, майнинг, программирование

Макет Bootstrap с содержимым столбца переменной высоты внутри строки и правильным переносом их на другой экран

введите здесь описание изображения Необходимо правильно расположить блок с помощью bootstrap4 в зависимости от размера экрана. На большом экране все должно быть подряд, но когда размер экрана уменьшен до среднего, самый правый блок должен быть ниже первого. Я попытался использовать класс d-none, и он работает. Но, нужно повторить код. Итак, просто хотел убедиться, что это правильный способ сделать это. Спасибо!

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-gutters">
  <div class="col-sm-12 col-md-6 col-lg-4" style="background-color: red; height: 60px">
    <p>Bread Crump</p>
    <p>Bread Crump</p>
	<div class="d-none d-md-block d-lg-none mt-2" style="background-color: pink; height: 100px">
		<p>List</p>
		<p>List</p>
		<p>List</p>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-4" style="background-color: green; height: 150px">
    <p>Name</p>
    <p>Name</p>
    <p>Name</p>
    <p>Name</p>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-4 d-md-none d-lg-block" style="background-color: pink; height: 100px">
    <p>List</p>
    <p>List</p>
    <p>List</p>
  </div>
</div>

html css twitter-bootstrap bootstrap-4
22.01.2018

Ответы:


1

Правильный способ сделать это в Bootstrap 4 — использовать классы order для изменения порядка столбцов в разных точках останова, например:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="row no-gutters">
    <div class="col-sm-12 col-md-6 col-lg-4" style="background-color: red;">
        <p>Bread Crump</p>
        <p>Bread Crump</p>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4" style="background-color: green; height: 150px">
        <p>Name</p>
        <p>Name</p>
        <p>Name</p>
        <p>Name</p>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4 order-md-2 order-lg-3" style="background-color: pink; height: 100px">
        <p>List</p>
        <p>List</p>
        <p>List</p>
    </div>
</div>

Класс order-md-2 говорит: Вы идете на место 2 на средних (md) экранах и выше (а также ниже).

Класс order-lg-3 говорит: Вы идете на место 3 на больших (lg) экранах и выше.

Да, и, конечно же, если вы немного перестроите HTML, вы можете обойтись одним классом order вместо двух, как здесь:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row no-gutters">
    <div class="col-sm-12 col-md-6 col-lg-4" style="background-color: red;">
        <p>Bread Crump</p>
        <p>Bread Crump</p>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4 order-md-3" style="background-color: pink; height: 100px">
        <p>List</p>
        <p>List</p>
        <p>List</p>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4" style="background-color: green; height: 150px">
        <p>Name</p>
        <p>Name</p>
        <p>Name</p>
        <p>Name</p>
    </div>
</div>

Этот класс order-md-3 во втором фрагменте кода сообщает второму столбцу:

«Обычно здесь ты второй, но начиная со средней (md) точки останова ты будешь третьим!»

И, конечно же, я мог бы так же обработать второй столбец в первом фрагменте кода (используя класс order-md-3). Это просто разные варианты.

Наконец, вы также можете использовать класс order-md-last во втором столбце, чтобы сообщить ему, что он должен идти последним, начиная со средней точки останова.

22.01.2018
  • Также обратите внимание: bootstrap 4.0.0-beta.2 уже устарел. Финал BS4 актуален. 23.01.2018
  • Спасибо за ваше предложение. Это работает, если высота первого и второго столбца одинакова, но если первый меньше второго, между ними создается зазор. 23.01.2018
  • Никаких пробелов, если вы используете мой код. Пожалуйста, скопируйте и вставьте мой фрагмент и убедитесь сами. Разрыв был там, потому что вы что-то жестко запрограммировали. Я удалил это в своих фрагментах кода. 23.01.2018
  • Вы не указали высоту для первого блока, и он принимает высоту второго блока. попробуйте сначала добавить высоту 70 пикселей, и вы заметите разницу. 23.01.2018
  • Ну, это flex-row в действии. У вас также есть этот пробел в исходном коде. Итак, возможные варианты: 1) Иметь пробел вверху первого столбца, а не внизу. 2) Расположите первую колонку по центру, т. е. с одинаковым зазором сверху и снизу, или 3) Растяните ее так, как вы уже видели. 23.01.2018
  • Другой вариант, конечно, состоит в том, чтобы позволить им располагаться друг над другом в столбце, но вы сказали, что вам нужен ряд. В гибкой строке это единственные варианты. Выровнять верх, выровнять низ, выровнять по центру или растянуть. 23.01.2018
  • Можно сказать, что это ограничение самого flexbox. Это потому, что flexbox одномерен. В сетке css у вас нет этого ограничения, потому что сетка css является двумерной. Но Bootstrap основан на flexbox и (пока) не включает сетку css. Сетка css позволила бы устранить этот пробел, даже не растягивая его. 23.01.2018
  • Однако, как правило, вам бы не хотелось такого поведения, которое допускала бы сетка css. Потому что обычно вы хотите, чтобы вещи были выровнены в ряд на веб-сайте. То, что вы имеете в виду, нарушит визуальное выравнивание строки. Таким образом, это было бы полезно только для особых случаев, но в целом было бы нежелательно для веб-сайта. 23.01.2018
  • Кроме того, сетка css является совершенно новой. Гораздо новее, чем flexbox, и поэтому работает только в новейших браузерах (по умолчанию в старых браузерах используется режим просмотра с мобильных устройств). 23.01.2018
  • Спасибо за ваши предложения! 23.01.2018
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..