Задать вопрос
Nemby
@Nemby
bootstrap

Как сделать в cеткe на Bootstrap одну колонку на SM разрешение и в две колонки на XS?

Здравствуйте.
Мне для сайте нужно сделать одно меню и адаптировать его для десктопа и мобильных устройств.
В меню 10 разделов, на десктопе с разрешением экрана больше 768 пикселей (col.sm) они расположены друг под другом в один столбик и получается 10 строк , а на мобильных устройствах (col-xs )должны быть в два столбика по 5 разделов в одном столбике.
Подскажите пожалуйста как это можно сделать?
Сейчас меню в одну колонку для всех устройств: 
<div class="row">
<!--колонка меню-->
<div class="col-xs-12 col-sm-3">
      <div class="panel panel-primary">
              <ul class="list-group">
  <li class="list-group-item">1</li>
  <li class="list-group-item">2</li>
  <li class="list-group-item">3</li>
  <li class="list-group-item">4</li>
  <li class="list-group-item">5</li>
  <li class="list-group-item">6</li>
  <li class="list-group-item">7</li>
  <li class="list-group-item">8</li>
  <li class="list-group-item">9</li>
  <li class="list-group-item">10</li>   
</ul>
       </div>
<!--колонка контента-->
  <div class="col-xs-12 col-sm-9">
      <div class="panel panel-primary">
      контент</div>
  • Вопрос задан
  • 1641 просмотр
3 комментария
Подписаться 2 Оценить 3 комментария
Решения вопроса 1
alexfilus
@alexfilus
Senior backend developer 
<!--колонка меню-->
      <div class="panel panel-primary">
          <ul class="list-group row">
            <li class="list-group-item col-sm-6 col-xs-12">1</li>
            <li class="list-group-item col-sm-6 col-xs-12">2</li>
            <li class="list-group-item col-sm-6 col-xs-12">3</li>
            <li class="list-group-item col-sm-6 col-xs-12">4</li>
            <li class="list-group-item col-sm-6 col-xs-12">5</li>
            <li class="list-group-item col-sm-6 col-xs-12">6</li>
            <li class="list-group-item col-sm-6 col-xs-12">7</li>
            <li class="list-group-item col-sm-6 col-xs-12">8</li>
            <li class="list-group-item col-sm-6 col-xs-12">9</li>
            <li class="list-group-item col-sm-6 col-xs-12">10</li>   
          </ul>
       </div>

как-то так примерно. Вообще способов много. Если не сработает, покажите вёрстку полностью.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
Nemby
@Nemby Автор вопроса
Рисунок 1 b28749ca65274a09b7eae181dd4ea147.png
Рисунок 2 0457e1558086452d98923631be17bde6.png
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">

      
  </head>
  <body>
<!--начало контейнера-->
    <div class="container">
<!-- заголовок-->
      <div class="page-header">
        <h1>Bootstrap grid examples</h1>
        <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
      </div>
<!-- разделы,контент -->
    <div class="row">
<!--.меню.-->
       <div class="col-xs-12 col-sm-3">
      <div class="panel panel-primary">
          <div class="panel-heading">меню</div>
              <ul class="list-group row">
            <li class="list-group-item col-sm-10 col-xs-5 col-xs-offset-1">1</li>
            <li class="list-group-item col-sm-10 col-xs-5 col-xs-offset-1">2</li>
            <li class="list-group-item col-sm-12 col-xs-6">3</li>
            <li class="list-group-item col-sm-12 col-xs-6">4</li>
            <li class="list-group-item col-sm-12 col-xs-6">5</li>
            <li class="list-group-item col-sm-12 col-xs-6">6</li>
            <li class="list-group-item col-sm-12 col-xs-6">7</li>
            <li class="list-group-item col-sm-12 col-xs-6">8</li>
            <li class="list-group-item col-sm-12 col-xs-6">9</li>
            <li class="list-group-item col-sm-12 col-xs-6">10</li>   
          </ul>
          </div>
       </div>
<!--.............................контент...................................-->
  <div class="col-xs-12 col-sm-9">
      <div class="panel panel-primary">
      Как появилась идея создания дудлов? В 1998 году, ещё до того, как компания стала корпорацией, была создана концепция дудла. Основатели Google Ларри и Сергей, желая рассказать о своем участии в фестивале 
      </div>
        </div>
        </div>
      </div>
      
<!--footer-->
      <hr>
      <footer>
          <div class="panel-footer">
              <div class="row">
                  <div class="col-xs-9">
        <p>&copy; 2017</p>
                  </div>
                  <div class="col-xs-3">counte</div>
              </div>
                  </div>
      </footer>      
      
  </body>
</html>
Ответ написан
6 комментариев
6 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Senior Fullstack Developer 🔥
Fundraise Up
от 3 800 до 6 500 $
Middle Fullstack Developer 🔥
Fundraise Up
от 3 800 до 5 500 $
Senior Fullstack/Backend Developer (Node.js, TypeScript, Postgres, Web3)
Eiger Ltd
от 4 000 до 6 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Необходим фронт-енд разработчик для разработки Tg Mini Apps
23 дек. 2024, в 13:37
100000 руб./за проект
Вёрстка страницы Битрикс
23 дек. 2024, в 13:17
10000 руб./за проект
Разработать ТГ-бота для транскрибации аудио в текст + chatgpt
23 дек. 2024, в 13:02
5000 руб./за проект
Ещё заказы