Jump to content
  • 0

Как изменить bootstrap col-md?


Pekod
 Share

Question

Добрый день ! Есть проблема при адаптаций экрана 595x740 размер контейнера bootstrap col-md не меняется. Мне нужно чтобы при адаптаций экрана 595х740 показывало по 2 слайда.Как это сделать?

 

main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="main.css" rel="stylesheet">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div class="wrapper">
        <header>Номер и почта</header>
        <main>
            

            <nav>
                <ul class="topmenu">
                <li><a href="" class="active">Главная</a>
                </li>
                <li><a href="" class="">Вниз<span class="fa fa-angle-down"></span></a>
                    <ul class="submenu">
                            <li><a href="">меню второго уровня 0<span class="fa fa-angle-down"></span></a>
                                <ul class="submenu">
                                    <li><a href="">меню третьего уровня</a></li>
                                    <li><a href="">меню третьего уровня</a></li>
                                    <li><a href="">меню третьего уровня </a></li>
                                    
                                </ul>
                            </li>
                            <li><a href="">меню второго уровня 1<span class="fa fa-angle-down"></span></a>
                                <ul class="submenu">
                                    <li><a href="">меню третьего уровня</a></li>
                                    <li><a href="">меню третьего уровня</a></li>
                                    <li><a href="">меню третьего уровня </a></li>
                                    
                                </ul>
                            </li>
                            <li><a href="">меню второго уровня 2<span class="fa fa-angle-down"></span></a>
                                <ul class="submenu">
                                    <li><a href="">меню третьего уровня</a></li>
                                    <li><a href="">меню третьего уровня</a></li>
                                    <li><a href="">меню третьего уровня </a></li>
                                    
                                </ul>
                            </li>
                            <li><a href="">меню второго уровня 2<span class="fa fa-angle-down"></span></a>
                                <ul class="submenu">
                                    <li><a href="">меню третьего уровня</a></li>
                                    <li><a href="">меню третьего уровня</a></li>
                                    <li><a href="">меню третьего уровня </a></li>
                                    
                                </ul>
                            </li>
                                
                        
                    </ul>
                </li>
                <li><a href="" class="">Вниз тритий уровень<span class="fa fa-angle-down"></span></a>
                    <ul class="submenu">
                            <li><a href="">Вправо 1<span class="fa fa-angle-down"></span></a>
                                <ul class="submenu">
                                    <li><a href="">меню третьего уровня</a></li>
                                    <li><a href="">меню третьего уровня</a></li>
                                    <li><a href="">меню третьего уровня </a></li>
                                    
                                </ul>
                            </li>
                            <li><a href="">Вправо 2<span class="fa fa-angle-down"></span></a>
                                <ul class="submenu">
                                    <li><a href="">меню третьего уровня</a></li>
                                    <li><a href="">меню третьего уровня</a></li>
                                    <li><a href="">меню третьего уровня </a></li>
                                    
                                </ul>
                            </li>
                            <li><a href="">Вправо 3<span class="fa fa-angle-down"></span></a>
                                <ul class="submenu">
                                    <li><a href="">меню третьего уровня</a></li>
                                    <li><a href="">меню третьего уровня</a></li>
                                    <li><a href="">меню третьего уровня </a></li>
                                    
                                </ul>
                            </li>
                        
                    </ul>
                </li>
                <li><a href="">Блог<span class="fa fa-angle-down"></span></a>
                    <ul class="submenu">
                        <li><a href="">Вправо 1<span class="fa fa-angle-down"></span></a>
                            <ul class="submenu">
                                <li><a href="">меню третьего уровня</a></li>
                                <li><a href="">меню третьего уровня</a></li>
                                <li><a href="">меню третьего уровня </a></li>
                                
                            </ul>
                        </li>
                        <li><a href="">Вправо 2<span class="fa fa-angle-down"></span></a>
                            <ul class="submenu">
                                <li><a href="">меню третьего уровня</a></li>
                                <li><a href="">меню третьего уровня</a></li>
                                <li><a href="">меню третьего уровня </a></li>
                                
                            </ul>
                        </li>
                        <li><a href="">Вправо 3<span class="fa fa-angle-down"></span></a>
                            <ul class="submenu">
                                <li><a href="">меню третьего уровня</a></li>
                                <li><a href="">меню третьего уровня</a></li>
                                <li><a href="">меню третьего уровня </a></li>
                                
                            </ul>
                        </li>
                    
                </ul>
                </li>
                <li><a href="">О нас</a></li>
                <li><a href="">Блог</a></li>
                <li><a href="">О нас</a></li>
                </ul>
            </nav>

            <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
                <div class="carousel-indicators">
                  <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                  <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
                  <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
                </div>
                <div class="carousel-inner">
                  <div class="carousel-item active" data-bs-interval="10000">
                    <img src="image/australia.jpg" height="565px" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                      <h1 style="font-size: 60px;">First slide label йцйцуйу уйуйуйуйуйу фыфыфуу</h1>
                      <p>Some representative placeholder content for the first slide.</p>
                    </div>
                  </div>
                  <div class="carousel-item" data-bs-interval="2000">
                    <img src="image/parks.jpg" height="565px" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                      <h5>Second slide label</h5>
                      <p>Some representative placeholder content for the second slide.</p>
                    </div>
                  </div>
                  <div class="carousel-item">
                    <img src="image/skyfoll.jpg" height="565px" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                      <h5>Third slide label</h5>
                      <p>Some representative placeholder content for the third slide.</p>
                    </div>
                  </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Next</span>
                </button>
              </div>
            
            
        </main>
        <content class="tab">
            <div class="container-prim">
                <div class="element-1">Пункт 1</div>
                <div class="element-2">Пункт 2</div>
                <div class="element-3">Пункт 3</div>
                <div class="element-4">Пункт 4</div>
              </div>



            <!-- <ul class="zebra">
                <li>Пункт 1</li>
                <li>Пункт 2</li>
                <li>Пункт 3</li>
                <li>Пункт 3</li>
            </ul> -->
        </content>
        <content class="zero">
            <div class="row slider">
                <div class="col-md-2">
                  <div class="details">
                    <h2>Заголовок 1</h2>
                    <p>Какая то информация для карусели первый</p>
                    <a href="">Прочитать</a>
                  </div>
                </div>
        
                <div class="col-md-12">
                  <div class="details">
                    <h2>Заголовок 2</h2>
                    <p>Какая то информация для карусели первый</p>
                    <a href="">Прочитать</a>
                  </div>
                </div>
        
                <div class="col-md-12">
                  <div class="details">
                    <h2>Заголовок 3</h2>
                    <p>Какая то информация для карусели первый</p>
                    <a href="">Прочитать</a>
                  </div>
                </div>

                <div class="col-md-12">
                    <div class="details">
                      <h2>Заголовок 4</h2>
                      <p>Какая то информация для карусели первый</p>
                      <a href="">Прочитать</a>
                    </div>
                </div>

                  <div class="col-md-12">
                    <div class="details">
                      <h2>Заголовок 5</h2>
                      <p>Какая то информация для карусели первый</p>
                      <a href="">Прочитать</a>
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="details">
                      <h2>Заголовок 6</h2>
                      <p>Какая то информация для карусели первый</p>
                      <a href="">Прочитать</a>
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="details">
                      <h2>Заголовок 7</h2>
                      <p>Какая то информация для карусели первый</p>
                      <a href="">Прочитать</a>
                    </div>
                </div>
            </div>  
        </content>
        <footer>Адреса и контактсы</footer>
    </div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script>
    $('.slider').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    responsive: [
        {
        breakpoint: 1024,
        settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
        }
        },
        {
        breakpoint: 600,
        settings: {
            slidesToShow: 2,
            slidesToScroll: 1,
            arrows: false
        }
        },
        {
        breakpoint: 480,
        settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false
        }
        }
        // You can unslick at a given breakpoint now by adding:
        // settings: "unslick"
        // instead of a settings object
    ]
    });
        
</script>
</body>
</html>

main.css

.wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  header {
      height: 30px;
      width:1200px;
      margin: 0 auto;
      padding: 1px;

  }
  footer {
    height: 300px;
    width:1200px;
    margin: 0 auto;
    padding:10px;
  }
  
  main {
    
  }
  
  body {
    margin: 0;
  }
  
  header {
    background-color: #daf0b3f6;
  }
  
  main {
    background-color:#ecf0f1;
    height: 600px;
    width: 1200px;
    margin: 0 auto;
    
    
  }


  content.tab {
    background-color:#66c3ee;
    height: 300px;
    width:1200px;
    margin: 0 auto;
    padding:10px;
    box-shadow: 0 -5px 5px 0 rgba(50, 50, 50, 0.5);
  }

  content.zero {
    background-color:#b7e9b5;
    height: 350px;
    width:1200px;
    margin: 0 auto;
    padding:10px;
    box-shadow: 0 -5px 5px 0 rgba(50, 50, 50, 0.5);
  } 
  
  footer {  
    background-color:#000000;
    color:white;
    box-shadow: 0 -5px 5px 0 rgba(65, 62, 99, 0.596);
  }


  @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,cyrillic);
  *{box-sizing: border-box;}
  body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
  }
  nav {background: #2fa4e7 ;}
  nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  nav ul:after {
    content: "";
    display: table;
    clear: both;
  }
  nav a {
    text-decoration: none;
    display: block;
    transition: .3s linear;
  }
  .topmenu > li {
    float: left;
    position: relative;
    border-left: 1px solid black;
  }
  .topmenu > li:first-child {border-left: 0;}
  .topmenu > li > a {  
    padding: 7px 30px;
    font-size: 14px;
    text-transform: uppercase;
    color: #FEFDFD;
    letter-spacing: 2px;
  }
  .topmenu > li > a.active {
    color: rgb(0, 0, 0);
  }

   
  .submenu a:hover {color: #0037cf;}
  .topmenu .fa, 
  .submenu .fa {
    margin-left: 5px;
    color: inherit;
  }
  .submenu {
    position: absolute;
    z-index: 5;
    min-width: 200px;
    background: white;
    border-top: 1px solid #CBCBCC;
    border-left: 1px solid #CBCBCC;
    border-right: 1px solid #CBCBCC;
    visibility: hidden;
    opacity: 0; 
    transform-origin: 0% 0%;
    transform: rotateX(-90deg);
    transition: .3s linear;  
  }
  .submenu li {position: relative;}
  .submenu li a {
    color: #282828;
    padding: 10px 20px;
    font-size: 13px;
    border-bottom: 1px solid #CBCBCC;
  }
  .submenu .submenu {
    position: absolute;
    left: 100%;
    top: -1px;
    transition: .3s linear;
  }
  nav li:hover > .submenu {
    transform: rotateX(0deg);
    visibility: visible;
    opacity: 1;
  }



.container-prim {
  font-size: 0;
  padding: 10px 50px 15px;
  text-align: center;
}

.element-1,
.element-2,
.element-3,
.element-4 {
  display: inline-block;
  width: 250px;
  height: 265px;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  padding-top: 10px;
  vertical-align: bottom;
  box-shadow: 5px -5px 5px 0 rgb(0, 0, 0);
  border-radius: 8px;
}

.element-1 {
  background-color: #fbfdfd;
}

.element-2 {
  color: rgb(0, 0, 0);
  background-color: #fbfdfd;
  margin-left: 20px;
}

.element-3 {
  color: rgb(0, 0, 0);
  background-color: #fbfdfd;
  margin-left: 20px;
}


.element-4 {
  color: #000000;
  background-color: #fbfdfd;
  margin-left: 20px;
}

.element-relative {
  position: relative;
  top: -20px;
  left: -20px;
}


/* .zebra {
    font: 14px Verdana, Geneva, sans-serif;
    text-align: center;
    
}

.zebra li {
    display : inline-block;
    width : 250px;
    height: 280px;
    margin-bottom: 10px;
    background: #ffffff;
    vertical-align: top;
    text-align: center;
    line-height: normal;
    box-shadow: 5px -5px 5px 0 rgb(0, 0, 0);

    /* эмуляция inline-block для IE6-7*/
    /* //display : inline;
    //zoom : 1; 
}
*/

.carousel-caption {
  transform: translateY(-50%);
  bottom: initial;
  top: 50%;
}



.details {
  margin: 20px 20px;
  background-color: #fff;
  padding: 30px 20px;
  position: relative;
  z-index: 1;
  height: 260px;
}
.details h2 {
  font-size: 22px;
  text-transform: uppercase;
  transition: 0.6s all;
}
.details p {
  font-size: 14px;
  transition: 0.6s all;
}
.details a {
  text-decoration: none;
  text-transform: capitalize;
  color: #fff;
  background-color: #2c3e50;
  padding: 6px 12px;
  display: inline-block;
  font-size: 14px;
  border: 1px solid #2c3e50;
  transition: 0.6s all;
}
.details::before {
  content: "";
  width: 5px;
  height: 100%;
  background-color: #ff5722;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  transition: 0.6s all;
}
.details:hover::before {
  width: 100%;
}
.details:hover h2,.details:hover p {
  color: #fff;
}
.details:hover a {
  background-color: transparent;
  border: 1px solid #fff;
}

 

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Здравствуйте.

Для столько больших примеров существует песочница. Выкладывать код таким образом избыточно.

Посмотрите на таблицу в документации: https://getbootstrap.com/docs/5.1/layout/grid/#grid-options
Скорей всего Вам подойдёт ".col-sm"

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Алеся
      Всем привет! Хотела бы представить свою работу новичка на обсуждение для получения конструктивной критики и/или советов, взглядов что можно улучшить или изменить, общее впечатление, конечно, тоже интересует.   https://alesia-k.github.io/Tajam-template/
      Обратите, пожалуйста, внимание на:
      - блок "MEET OUR AMAZING TEAM". Немного не нравится как смещаются item при наведении мыши, как будто немного дергаются. Так ли по-вашему это должно работать или такое поведение блока нужно изменить?
      - инпут "subscribe" в футторе. При клике на инпут, немного смещается и сам инпут, и рядом стоящая кнопка. Было бы классно, если бы подкинули идею как сделать, чтобы такого не было.
      - и почему-то при клике на <a href="tel:(+62)2122243333">(+62)21-2224 3333</a>   не идет процесса соединения.
      Заранее спасибо!
    • By Алеся
      Ребята, без вас никуда!
      Подскажите, пожалуйста, первый раз адаптирую и стилизую слайдер splide.
      Сам он работает, но как его стилизовать? В dev tools стилизация тех же стрелок отражается, но когда вношу их в css - не работает. Почему так? Как, например, тогда опустить ниже стрелки? Где устанавливать брейкпоинты и задавать им свойства?
       
      На сайте splide такая инфа по адаптиву. https://splidejs.com/guides/options/#breakpoints
       
      Вот типа того что-то пробую...
      https://jsfiddle.net/aqmuyhwd/
       
              
       
    • By Алеся
      Всем привет! Помогите, пожалуйста, найти ошибку в js. Почему-то не срабатывает display: none когда задумано скрыть первую картинку.
      btn_next.onclick = function () {
         images[i].style.display = 'none';
      }
      Весь код  здесь https://jsfiddle.net/Lx3qagdp/1/
       
      Заранее спасибо!
    • By Only091
      Помогите пожалуйста, не получается сделать постраничную навигацию. Делал все по урокам. в Итоге получилось сделать два разных каталога один с фильтрами другой с постраничной навигацией. И теперь я пытаюсь объединить два каталога. Но не получается. Сами файлы урока в архике каталог. Буду очень благодарен если мне помогут! catalog.phpcatalogDB.js
      каталог.7z
    • By TRVelund
      Хотели в крестиках ноликах заменить кресты и нули на анимешных тяночек.
      В голову лезет что то по типу x = url(ссылка), но нормально сформулировать ничего не можем, первый курс колледжа.
      Заранее спасибо за помощь.
  • Обсуждения

    • Всем привет! Хотела бы представить свою работу новичка на обсуждение для получения конструктивной критики и/или советов, взглядов что можно улучшить или изменить, общее впечатление, конечно, тоже интересует.   https://alesia-k.github.io/Tajam-template/ Обратите, пожалуйста, внимание на: - блок "MEET OUR AMAZING TEAM". Немного не нравится как смещаются item при наведении мыши, как будто немного дергаются. Так ли по-вашему это должно работать или такое поведение блока нужно изменить? - инпут "subscribe" в футторе. При клике на инпут, немного смещается и сам инпут, и рядом стоящая кнопка. Было бы классно, если бы подкинули идею как сделать, чтобы такого не было. - и почему-то при клике на <a href="tel:(+62)2122243333">(+62)21-2224 3333</a>   не идет процесса соединения. Заранее спасибо!
    • Попробуйте убрать стиль: html.pum-open.pum-open-overlay, html.pum-open.pum-open-overlay.pum-open-fixed .pum-overlay { /* overflow: hidden; */ } в файле "pum-site-styles.css?generated=1634785690&ver=1.16.2"
    • Прошу прощения!! Акроми
    • По одному лишь скриншоту сказать сложно
    • Доброго времени суток. Возникло 4 проблемы, 2 из них решилось при включении внутренних функций отладки плагина. Уже сломал голову выискивая в 1 случае нужный css. 1. При нажатии оставить заявку или на блок в *Наши услуги* появляется черная рамка в окошке (на скрине видно), причем, появляется она рандомно, иногда с 1 раза иногда с 10... При нажатии в окошко она исчезает. 2. Всего на сайте 4 окна, всё в них одинаковое, настройки и шорт код контактной формы, разница только в логотипе и номере. Проблема: При открытии окна *Оставить заявку* страница мотается вверх и открывается окно, при закрытии отматывается обратно на ту часть, где было нажатие кнопки (Хотя отмотки страницы вообще не должно быть, нажал окно просто открылось). Так же есть кликабельные блоки в разделе *Наши услуги*, при нажатии они так же отматывают страницу вверх, а при закрытии не возвращается вниз. С данной проблемой (скорей всего проблема в совместимости скриптов, но в скриптах я полный 0) столкнулся в первые в данном плагине. Буду признателен любой помощи.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy