- 0
2 footer'а и масштабирование ширины в Bootstrap 3
-
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 Jericho
Начал учить HTML для себя. Проблема в том, что сделал заголовок и таблицу, но, нужно чтобы текст был внизу таблицы. Сделал для этого подвал, но что-то не работает, все равно текст выше таблицы.
—————--
<!DOCTYPE html>
<HTML>
<HEAD>
<meta charset="utf-8">
<TITLE>Главная страница</TITLE>
</HEAD>
<BODY>
<header>
<H1> <center>Текст Заголовка ...</center> </H1>
</header>
<center>
<table border="100">
<tr>
<th>№</th>
<th>Текст</th>
<th>Текст</th>
<th>Текст</th>
<th>Время</th>
<th>Текст</th>
</tr>
<tr>
<tr>
<td>1.</td>
<td>Текст</td><td>Текст</td><td>ОКР</td><td>17.20.34 - 18.07.2020</td><td> </td>
<tr>
<td>2.</td>
<td> </td><td> </td><td> </td><td> </td><td> </td>
<tr>
<td>3.</td>
<td> </td><td> </td><td> </td><td> </td><td> </td>
<tr>
<td>4.</td>
<td> </td><td> </td><td> </td><td> </td><td> </td>
<tr>
<td>5.</td>
<td> </td><td> </td><td> </td><td> </td><td> </td>
<tr>
<td>6.</td>
<td> </td><td> </td><td> </td><td> </td><td> </td>
<tr>
<td>7.</td>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
</center>
</BODY>
<footer>
Тексdт
</footer>
</HTML>
-
By Elizavetk_a
Здравствуйте!
Возникла проблема с реализацией одной идеи.
Есть интерактивный объект с возможностью прокрутки городов. И есть фотографии, сделанные в виде cards bootstrap 4. Необходимо, чтобы при выборе города выделялись определенные фотографии. Можете подсказать, как можно это реализовать в верстке, какие материалы изучить?
Схематический рисунок прикреплен ниже.
Заранее спасибо)
-
By kask
Подскажите какие стили нужно переопределить чтобы навигационная панель в navbar выезжала слева на право а не сверху вниз как определенно стандартно
-
By Tascan
Всем привет.
В данный момент изучаю Bootstrap и задался таким вопросом. По правилам сетки Bootstrap, если я не ошибаюсь row и col должны быть внутри элемента с классом container.
Но вот если при вёрстке макет разделён на отдельные блоки, например: header отдельно, далее ещё пару блоков с информацией и за ним footer. Как при таком варианте правильнее будет сделать порядок: общий тег container, вместо стандартного wrapper и далее внутри него все вышеперечисленные теги или же нужно создать container для каждого раздела?
А если, например, у каждого из этих разделов свой фон? Тогда уже нужно идти по второму варианту: делать разделы на 100% ширину браузера, прописывать им фон, а вот внутри них уже делать div'ы с классом container, которые уже ограничат ширину блоков с контентом?
-
Question
TCAby
Делаю первый раз верстку под bootstrap — решил осваивать фреймворк и все такое. Проблема — «плывет» при сужении экрана. Он высокий, 400px, фоном стоит картинка. При сужении экрана столбцы, которые не помещаются по ширине, уходят вниз, но картинка не «размножается» по вертикали (вариант repeat-y не срабатывает так, как надо). Далее, под футером стоит еще одна строка (div height:80px) более темная по фону (в ней копирайты). При сужении экрана она не уходит вниз под все выстроившиеся вертикально колонки footer, а остается «прилеплена» к нему снизу, таким образом частично закрывая столбцы футера.
Вот нормальный футер, который задуман:
А вот после сжатия экрана:
Link to comment
Share on other sites
0 answers 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.