Jump to content
  • 0

В сетке bootstrap два col-md-6, одно падает вниз


garmoni
 Share

Question

21 answers to this question

Recommended Posts

  • 0
8 минут назад, npofopr сказал:

Разочарую вас, но так нельзя делать, касательно jsfiddle.

Хотя бы так https://jsfiddle.net/npofopr/aw0qvc0e/3/

Мне нужно чтобы зона main-menu была на всю страницу, так как это фиксированое меню, а внутри wrapper.

Сделала все равно не помогло

<div class="main-menu">
			<div class="row wrapper">
				<div class="col-xs-12 col-md-6 ">
        			<section class="jqueryOptions opt1">
					<ul>
						<li>
							<a href="#">Меню</a>
						</li>
						<li>
							<a href="#">Ресторан</a>
						</li>
						<li>
							<a href="#">Банкетный зал</a>
						</li>
						<li>
							<a href="#">Спорт-бар</a>
						</li>
						<li>
							<a href="#">Контакы</a>
						</li>
					</ul>
					</section>
					
				</div>
				<div class="col-xs-12 col-md-6">
				<div class="order">
					<button>Заказать банкет</button>
				</div>
				<div class="select-area">
	  				<select name="choose" id="choose" class="input-select">
						<option value="opt1">RU</option>
						<option value="opt2">EN</option>
			      	</select>
			    </div>
				<div class="tel">
					<span>22 070 700</span>
				</div>
				</div>
			</div>
			</div>

 

Edited by garmoni
Link to comment
Share on other sites

  • 0
1 час назад, garmoni сказал:

Кажется ты не понимаешь как работает Responsive. Не важно какой ширины <div>, важно какой ширины экран. 

На скрине у тебя показана работа класса "col-xs-12" — ширина 100%. То есть — все правильно работает.

Link to comment
Share on other sites

  • 0
56 минут назад, klierik сказал:

Кажется ты не понимаешь как работает Responsive. Не важно какой ширины <div>, важно какой ширины экран. 

На скрине у тебя показана работа класса "col-xs-12" — ширина 100%. То есть — все правильно работает.

На большом экране то же самое. У меня адаптивная верстка

 

2.jpg

Edited by garmoni
Link to comment
Share on other sites

  • 0
7 минут назад, garmoni сказал:

На большом экране то же самое. У меня адаптивная верстка

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

Если в пример https://jsfiddle.net/aw0qvc0e/5/ добавить Bootstrap то всё работает ровно так как и должно работать (как уже было сказано выше): http://take.ms/1VPYm

Link to comment
Share on other sites

  • 0
24 минуты назад, klierik сказал:

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

Если в пример https://jsfiddle.net/aw0qvc0e/5/ добавить Bootstrap то всё работает ровно так как и должно работать (как уже было сказано выше): http://take.ms/1VPYm

Наверное что то не так подключила

http://garmoni.inf.ua/paprika/

Edited by garmoni
Link to comment
Share on other sites

  • 0

Чтобы не создавать отдельно тему, еще вопрос :rolleyes:

Текст на картинке находится под логотипом
https://screenshots.firefox.com/zyZPqLgqEE1Ei59M/garmoni.inf.ua


после уменьшения экрана, картинка не уменьшает и получается такое
https://screenshots.firefox.com/yGW4tvmsJ7xGGJB8/garmoni.inf.ua

Edited by garmoni
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 Marri.nich
      Всем привет) Самостоятельно обучаюсь верстке. Сейчас изучаю Bootstrap и столкнулась с такой проблемой: 
      <header>         <nav>             <div class="container">                 <ul class="menu">                     <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li>                     ...                     <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li>                 </ul>             </div>         </nav> </header> Использую в верстке стандартный контейнер из Bootstrap'а. Его стили не трогаю.
      Сейчас корплю над адаптивностью сайта и при изменении размера устройства (в консоли разработчика) на 768px шапка вылезает за пределы экрана.
      Как удалось выяснить header принимает требуемое значение width: 768px, а вот nav упорно занимает 993px и они тянутся от container'а (он согласно стилям Bootstrap'а имеет max-width: 720px, но его margin-left и margin-right почему-то принимают значение 136,50px. 
      Дополнение: тегу nav в стилях задан width: 100%.
      Вопрос:
      1. Правильно ли я понимаю, что cтандартный контейнер из Bootstrap'а должен был в данном примере рассчитаться так: width=max-width=720px, margin-left=margin-right=(768px-720px-12pxpadding-left-12pxpadding-right)/2=12px?
      2. Почему margin'ы работают не так как я ожидаю?)
      Если я что-то неясно или не совсем корректно изложила прошу понять и простить :)))
      Спасибо за ответы.
       
    • By Etaro
      Я не понимаю, в чём проблема в вертикальном выпадающем меню. Где я мог напортачить? Нужно сделать, чтобы колонки были по вертикали, а не по горизонтали.


    • By Elizavetk_a
      Здравствуйте!
      Возникла проблема с реализацией одной идеи.
      Есть интерактивный объект с возможностью прокрутки городов. И есть фотографии, сделанные в виде  cards bootstrap 4. Необходимо, чтобы при выборе города выделялись определенные фотографии. Можете подсказать, как можно это реализовать в верстке, какие материалы изучить?
      Схематический рисунок прикреплен ниже. 
      Заранее спасибо)

    • By kask
      Подскажите какие стили нужно переопределить чтобы навигационная панель в navbar выезжала слева на право а не сверху вниз как определенно стандартно 
    • By Tascan
      Всем привет.
      В данный момент изучаю Bootstrap и задался таким вопросом. По правилам сетки Bootstrap, если я не ошибаюсь row и col должны быть внутри элемента с классом container.
      Но вот если при вёрстке макет разделён на отдельные блоки, например: header отдельно, далее ещё пару блоков с информацией и за ним footer. Как при таком варианте правильнее будет сделать порядок: общий тег container, вместо стандартного wrapper и далее внутри него все вышеперечисленные теги или же нужно создать container для каждого раздела?
      А если, например, у каждого из этих разделов свой фон? Тогда уже нужно идти по второму варианту: делать разделы на 100% ширину браузера, прописывать им фон, а вот внутри них уже делать div'ы с классом container, которые уже ограничат ширину блоков с контентом? 
  • Обсуждения

    • Вот тут есть актуальный список бесплатных тестов с сертификацией https://www.classcentral.com/report/free-certificates/ Обратите внимание на HackerRank, там есть тест с сертификацией непосредственно по CSS
    • Нужно сверстать по картинке меню-бар. Не получается сделать вот это поле поиска <!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>     <style> .nav {     display: flex;     list-style-type: none;     padding-left: 0;     font-size: 17px;     text-transform: uppercase; } .nav > li > a {     color: #fff;     text-decoration: none; } .nav > li {     padding-left: 29px;     margin-left: 30px; } .header {     display: flex;     background-color: #31485b;     justify-content: space-between;     align-items: center; }   .sidebar {     width: 410px;     display: block;     padding-right: 20px;     margin: auto;     margin-left: 250px; }   ul.nav li a:hover {     background-color: #687c8d;     padding: 17.2px 35px; }   input[type="text"], input[type="search"] {   background-color: #687c8d;   width: 60%;   padding: 8px;   margin: 0 50px }   input[type="search"] {     color: #31485b;     font-style: italic; }     </style> </head> <body>     <div class="header">                 <ul class="nav">                     <li class="s1"><a href="#">Главная</a></li>                     <li><a href="#">Блог</a></li>                     <li><a href="#">Сервисы</a></li>                     <li><a href="#">Онлайн-профессии</a></li>                     <li><a href="#">О сайте</a></li>                 </ul>                                 <div class="sidebar">                     <form method="post" action="#" id="search_form" >                       <input type="search" name="search_field" placeholder="Поиск" />                     </form>                   </div>     </div> </body> </html>  
    • ЭЭ, а почему оно должно удалять? Может стоило повесить событие на эту кнопку и указать, что при это должно происходить?
    • например -R не будет качать указанные файлы если вы знаете список нужных вам файлов, проще их указать или можно написать парсер
    • выкладывайте код в песочнице, так будет проще У вас media подключается до blocks/header, по этому правила из blocks/header перекрывают media сверху вниз в css пишите tag .class ... @media и не будет у вас подобных проблем  
×
×
  • 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