Добрый день, форумчане! Прошу подсказки в освоении Bootstrap, вероятно не понимаю основного принципа работы. Стоит большая задача, но начал с простого примера, хочу сделать 2 кнопки стабильной ширины в 8 колонок Bootstrap ровно по центру экрана на устройствах любого размера. Код следующий: HTML: <!DOCTYPE html> <html> <head> <title>Bootstrap test</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <form class="my_buttons"> <div class="row"> <div class="col-lg-8 col-lg-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2 col-md-8 col-md-offset-2"> <button formaction="https://www.yandex.ru/"> Ссылка на Яндекс </button><br> <button formaction="https://www.rambler.ru/"> Ссылка на Рамблер </button> </div> </div> </form> </body> </html> Полученные кнопки упорно не хотят занимать свою позицию, хотя казалось бы, что колонка шириной в 8 столбцов и отступом в 2 столбца должна явно указывать на размер формы. Прошу помощи, надеюсь, что решение этой задачи поможет в понимании вопроса в целом и дальнейшем самостоятельном решении в более масштабных пропорциях... Спасибо!
Что тут на логика? Может хватило бы просто col-xs-8 col-xs-offset-2 например + у кнопок что-то вроде класса btn-block должно стоять, чтобы они заполнили всё свободное место по ширине. Добавь изображения что вышло и что ты хочешь получить, думаю так будет проще понять задачу
Спасибо за подсказку, хочу получить в итоге примерно то, что на скриншоте: Т.е. форму авторизации, на которой центральные элементы всегда по центру вне зависимости от размера экрана устройства. Плюс соответственно, изменение размера шрифта и самих элементов пропорционально размеру экрана.
на подобии такого? http://getbootstrap.com/examples/signin/ Ещё .btn-block http://getbootstrap.com/css/#buttons-sizes Как изменять размер шрифта от размера экрана можно нагуглить, но ты пиши если не получиться
А это какая версия Bootstrap? Похоже на третью. Тогда где контейнер? http://bootstrap-3.ru/css.php#overview-container
при чем тут бутстрап? =) просто размести элементы по центру родителя, а родителя можно на всю ширину (или почти) сделать через бутстрап или не через бутстрап - уже не важно.
Ну как это причем? Он верстает на бутстрапе. Если это сайт с фиксированной шириной - без контейнера у него получится резиновый. Да и у блока class="row" отрицательные маргины, которые паддингами компостирует контейнер. Если решит сделать на всё ширину у него появится горизонтальный скрол. Зачем изначально верстать не правильно? Ну а по кнопкам на всю ширину блока - достаточно к кнопкам добавить класс class="btn-block".
Товарищи, спасибо большое всем за советы! Смотрите, задача стоит примерно такая, как на рисунке: https://ibb.co/hga35v (не смог залить картинку напрямую из-за размера файла, это ссылка на хостинг). Код написан следующий: index.php HTML: <!DOCTYPE html> <html lang="ru-RU"> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sokolov.ru</title> <link href="/css/bootstrap.css" rel="stylesheet"> <link href="/css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="logo_switch"> <div class="row"> <div class="col-xs-4"> <img src="logo_vert.png" style="width: 100%"> </div> <div class="col-xs-2 col-xs-offset-6"> <a id="rus" href="index.php?lang=ru" style="color:<?php echo "$ru_color";?>">РУ</a> <a href="index.php?lang=en" style="color:<?php echo "$en_color";?>">ENG</a> </div> </div> </div> <form class="all_active_elements"> <div class="Header_Plus_tip"> <div class="row"> <div class="col-xs-8"> Для доступа в ИНТЕРНЕТ необходимо пройти идентификацию </div> <div class="col-xs-2 col-xs-offset-2"> <input type="checkbox" id="tip_1" class="tip-checkbox"> <label for="tip_1"> <img src="q_mark.png" alt="tip_1" style="width: 100%"> </label> <span class="tip"> Подсказка номер один. <label for="tip_1" class="tip-close">X</label> </span> </div> </div> </div> <div class="Big_checkbox"> <div class="row"> <div class="col-xs-10 col-offset-1"> <input type="checkbox" class="Big_checkbox"> <label for="Big_checkbox">Я прочитал и согласен с условиями <a href="#"><ins>пользовательского соглашения</ins></a></label> </div> </div> </div> <div class="Buttons_Plus_tips"> <div class="row"> <div class="col-xs-10 col-xs-offset-1"> <div class="col-xs-8"> <button type="button" class="btn btn-primary btn-block">С помощью СМС</button> </div> <div class="col-xs-2 col-xs-offset-2"> <input type="checkbox" id="tip_2" class="tip-checkbox"> <label for="tip_2"> <img src="q_mark.png" alt="tip_2" style="width: 100%"> </label> <span class="tip"> Подсказка номер два. <label for="tip_2" class="tip-close">X</label> </span> </div> <div class="col-xs-8"> <button type="button" class="btn btn-primary btn-block">Через Госуслуги</button> </div> <div class="col-xs-2 col-xs-offset-2"> <input type="checkbox" id="tip_3" class="tip-checkbox"> <label for="tip_3"> <img src="q_mark.png" alt="tip_3" style="width: 100%"> </label> <span class="tip"> Подсказка номер три. <label for="tip_3" class="tip-close">X</label> </span> </div> <div class="col-xs-8"> <button type="button" class="btn btn-primary btn-block">Бесплатным звонком</button> </div> <div class="col-xs-2 col-xs-offset-2"> <input type="checkbox" id="tip_4" class="tip-checkbox"> <label for="tip_4"> <img src="q_mark.png" alt="tip_4" style="width: 100%"> </label> <span class="tip"> Подсказка номер четыре. <label for="tip_4" class="tip-close">X</label> </span> </div> </div> </div> </div> </form> </body> </html> style.css Код (CSS): #rus { border-right: 1px solid black; padding-right: 4px; } .logo_switch{ margin-right: 7%; margin-top: 4%; margin-left: 7%; } .tip-checkbox{ display: none; } .tip{ display: none; } #tip_1:checked ~ .tip { display: block; } #tip_2:checked ~ .tip { display: block; } #tip_3:checked ~ .tip { display: block; } #tip_4:checked ~ .tip { display: block; } .Header_Plus_tip{ margin-top: 10%; margin-bottom: 10%; margin-right: 7%; margin-left: 7%; } .Big_checkbox{ margin-left: 10%; margin-right: 10%; margin-bottom: 4%; } Выходит все равно какая-то кривь..( Может я не очень логично разбил строки и колонки? Центрирование текста по вертикали тоже не совсем понятно как правильно сделать. Подскажите пожалуйста. Спасибо!
Соответственно в постановку моей задачи входит, чтобы полученная страничка перво-наперво корректно отображалась на всех мобильных устройствах. Такие дела.. --- Добавлено --- Дааа) В шаблон тут важно попасть на самом деле) --- Добавлено --- Может быть можно было более удачно выбрать строки и колонки bootstrap'а, чтобы точнее подогнаться под шаблон?