Как оперативно складывать столбцы сетки семантического пользовательского интерфейса внутри строки в немобильной точке останова

Я пытаюсь создать стек из двух столбцов одинаковой ширины между размерами computer и tablet. Я делаю это с помощью semantic-ui-react, но вот что у меня есть в визуализированном HTML:

<div class="ui stackable two column grid">
  <div class="row">
    <div class="eight wide computer sixteen wide mobile sixteen wide tablet column">
      <div class="ui segment">
        <img src="https://react.semantic-ui.com/assets/images/wireframe/paragraph.png" class="ui image" />
      </div>
    </div>
    <div class="eight wide computer sixteen wide mobile sixteen wide tablet column">
      <div class="ui segment">
        <img src="https://react.semantic-ui.com/assets/images/wireframe/paragraph.png" class="ui image" />
      </div>
    </div>
  </div>
</div>

(jsfiddle)

Проблема, с которой я столкнулся, заключается в том, что нет вертикального желоба размером tablet, но есть желоб размером mobile.

Я предполагаю, что мне не следует использовать свойство stackable, поскольку оно жестко запрограммировано так, чтобы влиять только на размер mobile. Что мне делать на его месте?

25.03.2018

Ответы:

Вы смешиваете определения размера столбца. Итак, во-первых, я бы удалил определение размера вашего компонента Grid.

Вы правы, что stackable специально нацелен на мобильные устройства, поэтому, если вам нужно другое поведение, вам также следует удалить это из своего компонента Grid.

Из-за того, что вы пытаетесь сделать, вероятно, имеет больше смысла переместить определения размеров исключительно в компоненты Grid.Column. Технически вы можете добиться того же «стекируемого» поведения, просто задав ширину мобильного столбца равной шестнадцати. Определение размера на уровне Grid.Column дает вам наибольший контроль.

По сути, если то, что вы определили в своих компонентах Grid.Column прямо сейчас, явно определяет то, что вы хотите, удаление свойств «stackable» и «columns» из компонента Grid должно дать вам то, что вы хотите, поскольку вы контролируете ширину более точно. Сетка.Уровень столбца.

28.03.2018

Новые материалы

Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…

Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

Лицензии с открытым исходным кодом: руководство для разработчиков и создателей

В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

Объяснение документов 02: BERT

BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?

Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)

Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]

Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter

Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

Метки

Machine Learning JavaScript Data Science Artificial Intelligence Software Development Python Web Development Coding Deep Learning AI React Software Engineering Nodejs Java Front End Development Typescript Computer Science Data Algorithms Development NLP Tech Programming Languages CSS ChatGPT HTML Python Programming Javascript Tips Angular Computer Vision Startup Data Visualization Neural Networks Tutorial Statistics Productivity Reactjs Learning