Я не могу позволить контейнеру реагировать, когда я нажимаю на переключение устройства в инструменте chrome dev
Я решаю домашнюю задачу. И для этой части мне нужно, чтобы у контейнера был нормальный край в представлении компьютера, а после переключения устройства в chrome devTool он должен быть на всю ширину. Я загружу скриншоты, чтобы прояснить это.
ответ переключить представление
<!DOCTYPE html>
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin = "anonymous">
<link rel = "stylesheet" type = "text/css" href = "store.css">
<meta http-equiv = "content-type" content = "text/html; charset=UTF-8">
<meta name = "viewpoint" content = "width=device-width, initial-scale=1">
<title>Store Home</title>
</head>
<body>
<ul class = "navbar" style = " background-color: yellow;">
<li><a href = "http://csc412sfsu.com/~yzhang25/store_home">Home</a></li>
<li><a href = "http://csc412sfsu.com/~yzhang25/store_hours">Hours</a></li>
<li><a href = "http://csc412sfsu.com/~yzhang25/store_about">About</a></li>
</ul>
<!--<div style = "background-color: #FCDFBB; max-width: 800px; margin:auto; height: 90vh">-->
<div class = "container" style = "background-color: #FCDFBB; height: 90vh; margin:
auto;">
<h1>Yiyu's Store</h1>
<p>
This is my personal store, it will sell some of my personal stuffs. <br>
Hope you guys love it!<br>
Also, I sell some small pets here, cute pet only! <br>
</p>
<p>
Another paragraph lol <br>
It will show with different color <br>
</p>
<p>This is the unordered thist that I'm displaying on this page</p>
<ul>
<li>Great service</li>
<li>Long hours</li>
<li>Quality products</li>
</ul>
</div>
<!--</div>-->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous"></script>
</body>
</html>
Ответы 1
Возможно, проще думать о вещах в обратном порядке: переходя от меньших экранов к большим. Это проверенный рабочий процесс (конечно, есть исключения) для разработки и реализации дизайнов экранов, которые должны работать на мобильных устройствах с разрешением вплоть до рабочего стола.
Этот обзор может быть полезен: https://zellwk.com/blog/how-to-write-mobile-first-css/
Тег body по умолчанию заполняет доступную ширину окна, если только оно не ограничено (вы, вероятно, захотите добавить margin: 0 к элементу body, чтобы гарантировать отсутствие зазоров по краям). Внутри вашего тега body я бы рекомендовал обернуть весь ваш контент внутри тега main (если ваше домашнее задание прямо не запрещает это). main — это блочный элемент, который будет растягиваться, чтобы заполнить все доступное горизонтальное пространство своего родителя (в этой базе это элемент body).
Таким образом, вы получаете мобильный («переключаемый») вид, растягивающийся до краев практически бесплатно. Он работает из коробки.
Без начальной загрузки
При больших размерах экрана (например, настольных компьютерах) вам нужно ограничить ширину вашего элемента main с помощью объявления max-width (через медиазапрос) и установить для его правого и левого полей значение auto. Это отцентрирует элемент main по горизонтали.
В самом простом виде это будет выглядеть примерно так:
@media screen and (min-width: 1200px) {
main {
max-width: 1024px;
margin-right: auto;
margin-left: auto;
}
}
Разбираем его (не Bootstrap)
Здесь мы говорим, что при ширине окна, равной или превышающей 1200px, мы хотим применить правило CSS, которое ограничивает максимальную ширину main только 1024px. (Я просто вытаскиваю эти значения из шляпы; не стесняйтесь изменять их в соответствии с вашими потребностями). И мы хотим, чтобы он был центрирован в области просмотра, поэтому мы скажем левому и правому полям автоматически расширяться внутрь от правого и левого краев, пока они не достигнут элемента main.
Начальная загрузка
Похоже, вы используете Bootstrap 4.0.0, поэтому у вас есть доступ к сетке Bootstrap на основе flexbox. С помощью служебных классов BS выполнить эту компоновку можно довольно легко. То, как вы решите это сделать, будет зависеть от того, как вы настроили Bootstrap (и как вы решите использовать Bootstrap), но из коробки вы можете сделать что-то простое:
<body>
<main class = "container-fluid">
<div class = "row justify-content-lg-center">
<div class = "col-12 col-lg-8">
<!-- content -->
</div>
</div>
</main>
</body>
Разбираем его (Bootstrap)
container-fluidсоздает элемент контейнера шириной 100% в все время. Это означает, что при меньшей ширине окна (например, на телефонах) ваш контент будет занимать всю ширину области просмотра.rowприменяет некоторые базовые родительские стили flex-box, которые вы можете дополнительно настроить, установив для свойстваjustify-contentзначениеcenterпри «большой» (lg) ширине окна (с классом полезности BS:justify-content-lg-center).- Поскольку BS по умолчанию использует сетку из 12 столбцов, установка
col-12для дочернего элементаrowозначает, что он будет растягиваться на 100% ширины родительского элемента. При больших размерах экрана приведенный выше код говорит, что элемент должен растягиваться только для заполнения 8/12 (или 2/3) горизонтальных размеров его родителя (т. е.col-lg-8). Поскольку мы сказали элементуrowцентрировать его flex-потомок по ширине окнаlg, этот макет будет центрирован по горизонтали.
Судя по вашим снимкам экрана, вы не хотите ограничивать ширину вашего header (но я не видел элемента header в вашей разметке). Так что это нужно было бы обрабатывать немного по-другому.
Что касается вашего конкретного вопроса, существует множество способов выполнить этот макет с помощью Bootstrap (или без него), но, возможно, приведенное выше поможет вам начать работу.
У меня нет заголовка в этом проекте.