- 0
Помогите подключить Bootstrap
-
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 Elizavetk_a
Здравствуйте!
Возникла проблема с реализацией одной идеи.
Есть интерактивный объект с возможностью прокрутки городов. И есть фотографии, сделанные в виде cards bootstrap 4. Необходимо, чтобы при выборе города выделялись определенные фотографии. Можете подсказать, как можно это реализовать в верстке, какие материалы изучить?
Схематический рисунок прикреплен ниже.
Заранее спасибо)
-
By kask
Подскажите какие стили нужно переопределить чтобы навигационная панель в navbar выезжала слева на право а не сверху вниз как определенно стандартно
-
By Tascan
Всем привет.
В данный момент изучаю Bootstrap и задался таким вопросом. По правилам сетки Bootstrap, если я не ошибаюсь row и col должны быть внутри элемента с классом container.
Но вот если при вёрстке макет разделён на отдельные блоки, например: header отдельно, далее ещё пару блоков с информацией и за ним footer. Как при таком варианте правильнее будет сделать порядок: общий тег container, вместо стандартного wrapper и далее внутри него все вышеперечисленные теги или же нужно создать container для каждого раздела?
А если, например, у каждого из этих разделов свой фон? Тогда уже нужно идти по второму варианту: делать разделы на 100% ширину браузера, прописывать им фон, а вот внутри них уже делать div'ы с классом container, которые уже ограничат ширину блоков с контентом?
-
By vka986
Здравствуйте, я начинающий верстальщик, только учусь сейчас изучаю технологию Bootstrap и у меня возникла проблема, есть три блока с контентом, каждый занимает по 4 колонки то есть использую col-md-4, в сетке бутстрапа в макете все отлично сходиться вместе с 20px margin-right, но в верстке как только в CSS пишу margin хотя бы 1 px, последний блок сезжает на строчку ниже. Подскажите как с этим быть заранее спасибо.
-
Question
virtas
Скачал Bootstrap пробую подключить но не как не выходить пишет вот такую ошибку - https://fotki.yandex.ru/next/users/sawenkov-o-s/album/429223/view/970752
Вот сам код в шаблона header
`<?php
/**
* Шаблон шапки (header.php)
* @package WordPress
* @subpackage your-clean-template
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); // вывод атрибутов языка ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); // кодировка ?>">
<?php /* RSS и всякое */ ?>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="alternate" type="application/rdf+xml" title="RDF mapping" href="<?php bloginfo('rdf_url'); ?>">
<link rel="alternate" type="application/rss+xml" title="RSS" href="<?php bloginfo('rss_url'); ?>">
<link rel="alternate" type="application/rss+xml" title="Comments RSS" href="<?php bloginfo('comments_rss2_url'); ?>">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); // абсолютный путь до темы ?>/style.css">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); // абсолютный путь до темы ?>/css/bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title><?php typical_title(); // выводи тайтл, функция лежит в function.php ?></title>
<?php wp_head(); // необходимо для работы плагинов и функционала ?>
</head>
<body <?php body_class(); // все классы для body ?>>
<div class="container">
<h1>hello!!!</h1>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
Link to comment
Share on other sites
1 answer to this question
Recommended Posts
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.