Строка Bootstrap не укладывает div на маленькие размеры экрана

Я использую строку начальной загрузки для двух div. Я хочу, чтобы они были в ряд на больших устройствах, но сложены на маленьких устройствах. Bootstrap не накапливает его на небольших устройствах, он по-прежнему поддерживает их оба на уровне 50%. Я имею в виду те элементы div, которые имеют идентификатор left и themebox.

  <div class = "container">
  <div class = "row">
    <div id = "left" class = "col-sm-12 col-lg-3">
     <br>
     <br>
     <h3> Mine Style</h3>
     <br>
     <br>
    <button id = "customize">Customize</button>
   </div>
   <div class = "col-sm-12 col-lg-9" id = "themebox"></div>



#themebox{
  height: 500px;
  background-color: white;
  float: right;
  box-shadow: 0 15px 45px 0 rgba(0,0,0,.1);
  padding-left: 0;
  padding-right: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.row{
 margin-left: 0 !important;
 margin-right:0 !important;
 }

Мой нормально складывается. Я вижу, вам не хватает двух закрывающих divs. Может, это твоя проблема?

— 30.01.2019 13:02

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

— 31.01.2019 06:22

html css twitter-bootstrap

30.01.2019 12:49

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы этого хотели?

#themebox{
  height: 500px;
  background-color: white;
  float: right;
  box-shadow: 0 15px 45px 0 rgba(0,0,0,.1);
  padding-left: 0;
  padding-right: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.row{
 margin-left: 0 !important;
 margin-right:0 !important;
 }

h3 {
  margin:20px 0 !important;
}

#left {
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  justify-content:center;
}

@media (max-width: 992px) { 
  #left {
  align-items:center;
  flex-direction:row;
  justify-content:flex-start;
}
  
  #customize {
    margin:0 20px;
  }
}

<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 = "container">
  <div class = "row">
    <div id = "left" class = "col-12 col-sm-12 col-lg-3">
     <h3> Mine Style</h3>
    <button id = "customize">Customize</button>
   </div>
   <div class = "col-12 col-sm-12 col-lg-9" id = "themebox"></div>

31.01.2019 06:21

Другие вопросы по теме

Как встроить теги опций в select и разделить их с помощью optgroup?

Минимизированный css Bootstrap загружается только в том случае, если я импортирую его в index.js

Я не знаю, как сделать, чтобы это поле отображалось горизонтально

Это ошибка дизайна материалов для веба?

Вызов стиля CSS из машинописного текста добавляет его в html-файл

Как сделать ссылку кликабельной только по тексту

Размер изображения в css для загрузки изображений php из файла

Отображение символа загрузки во время ожидания результата с помощью plot.ly Dash

Razor div пропускает css ::after

HTML <table> не помещается в контейнер (всегда больше)

Строка Bootstrap не укладывает div на маленькие размеры экрана

Ответы 1

Другие вопросы по теме

Похожие вопросы