Скрыть колонку только на маленьких экранах с помощью Bootstrap 4

Mike A спросил: 07 октября 2018 в 10:26 в: html

Я пытаюсь создать сетку, чтобы покрыть весь экран тремя колонками (слева, по центру, справа)

  1. Слева: этот столбец должен отображаться только на больших изображениях и должен иметь размер 16,6 % экрана (2/12)
  2. Середина: этот столбец должен всегда отображаться. он должен покрывать 75% (9/12) экрана при < = среднем размере. И 66,6% (8/12) для больших представлений
  3. Справа: этот столбец должен отображаться всегда. Он должен покрывать 16,6% (2/12) ширины при большом просмотре и 25% 3/12 при < = среднем размере

Вот моя HTML-разметка

<div class="container-fluid">    <div class="row">        <div class="col-lg-2 d-md-none bg-dark text-white">
            <h1>LEFT</h1>
            <p>This column should only show up on large views and should be 16.6% of the screen (2/12)</p>
        </div>
        <div class="col-lg-8 col-md-9 bg-danger text-white">
            <h1>MIDDLE</h1>
            <p>This column should always show up. it should cover 75% (9/12) of the screen on &lt;= mid-size view. And 66.6% (8/12) on a large views</p>
        </div>
        <div class="col-lg-2 col-md-3 bg-warning">
            <h1>RIGHT</h1>
            <p>This column should always show up. It should cover 16.6% (2/12) of the width on large view and 25% 3/12 on &lt;= mid-size view</p>
        </div>
    </div></div>

Вот кодовая страница с моим кодом https://www.codeply.com/go/LRlYKLav32

. Класс d-md-none не отображается в работать правильно. Я ожидаю, что столбец будет скрыт, когда представление небольшого размера, но должно быть видно в больших представлениях.

Как я могу исправить эту проблему?

0 ответов