#html #css
#HTML #css
Вопрос:
я хотел бы знать, как можно выровнять некоторые элементы с помощью Bootstrap, чтобы иметь более чистый вид для мобильной / ipad-версии моего веб-сайта. «01.1 Поддельные новости» и абзац под ними должны иметь левое поле, такое же, как у изображений под ним, то же самое для «01.2 плакатов Витгенштейна». Я добавляю изображение веб-сайта, чтобы вы могли его увидеть.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Archivo Blackamp;display=swap" rel="stylesheet">
<link href="icone/favicon_32x32.png" rel="icon" type="image/x-icon" />
<link rel="stylesheet" href="style.css">
<title>Giulia Giordano
</title>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md navbar-light fixed-top mt-lg-4 mt-sm-0 mt-md-4 mt-xl-4">
<a class="navbar-brand ml-4" href="index.html">
<img src="img/logo.png" width=100% alt="" loading="lazy">
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item mr-4">
<a href="index.html" class="nav-link text-dark">home</a>
</li>
<li class="nav-item mr-4">
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
progetti
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="graphicdesign.html">01. Graphic Design</a>
<a class="dropdown-item" href="videografica.html">02. Videografica</a>
</div>
</li>
<li class="nav-item mr-4">
<a href="chisono.html" class="nav-link text-dark ">chi sono?</a>
</li>
<li class="nav-item mr-1">
<a href="contattami.html" class="nav-link text-dark">contattami</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-md d-none d-lg-block d-xl-block fullScreen">
<img src="img/gd_graphicdesigngenerale.gif" class="fullScreen" alt="">
</div>
<div class="col-md d-flex align-items-center vertical-container justify-content-center fullScreen">
<div class="row mt-5">
<div class="offset-2 mt-15"></div>
<h2 class=" text-purple mt-5 mt-15">01</h2>
<div class="offset-1"></div>
<h2 class=" text-purple ml-3 mt-5 ">graphic <br>design</h2>
<div class="d-flex offset-3 vertical-container align-items-center">
<p class="col-9 display-5 mt-5 ml-3 mb-5 mr-6">Qui puoi trovare una selezione dei miei progetti di graphic design. La monografia di Armin Hofmann, grafico pioniero dello Swiss Design, e i cinque poster di tipografia espressiva realizzati per gli aforismi di Ludwig Wittgenstein. Tutti questi lavori sono stati eseguiti all'Accademia di Belle Arti di Palermo.</p>
</div>
<div class="offset-4">
</div>
</div>
</div>
</div>
<div class="row purple-white-section2" >
<div class="col-lg">
<div class="d-flex vertical-container align-items-center">
<div class="justify-content-start col-sm-8">
<h3 class="mt-5 mb-4">01.1</h3>
<h3 class="font-weight-lighter mt-5">How to Fight <br> Fake News</h3>
<p class=" display-5 mt-5">È possibile sconfiggere le fake
news? Perché è così difficile
riconoscerle e scovarle? Qual è
stata la prima bufala della storia? Alcune delle domande a cui questo
manuale risponde, una guida per
sconfiggere le notizie false.</p>
<a href="fakenews.html"><img src="scopridipiu/scopridipiu.png" alt="" class="mt-5"></a>
</div>
</div>
</div>
<div class="col-lg d-flex vertical-container align-items-center"><img
src="photoshop/graphicdesign_generale/img/fakenews_generale_2.jpg" class="img-fluid p-4 mt-4" alt=""><img
src="photoshop/graphicdesign_generale/img/fakenews_generale_3.jpg" class="img-fluid p-4 mt-4" alt="">
</div>
</div>
<div class="row">
<div class="col-lg d-flex align-items-center">
<img src="photoshop/graphicdesign_generale/img/black.png" width="50%" alt="">
<img src="photoshop/graphicdesign_generale/img/viola.png" class="mt-5" width="50%" alt="">
</div>
<div class="col-lg order-first order-lg-0 d-flex vertical-container align-items-center mt-4">
<div class="justify-content-start col-sm-8">
<h3 class="mt-5 mb-4 text-purple">01.2</h3>
<h3 class="font-weight-lighter mt-5">Wittengstein <br> poster</h3>
<p class="display-5 mt-5">Esercizio di tipografia espressiva.
Quattro aforismi del famoso
filosofo Ludwig Wittengstein
spiegati attraverso la tipografia e
il colore. Lavoro realizzto durante
il mo primo anno all’Accademia di
Belle Arti di Palermo.
</p>
<a href="wittengstein.html"><img src="scopridipiu/scopridipiu_viola.png" alt="" class="mt-5"></a>
</div>
</div>
</div>
<footer>
<div class="row p-4">
<div class="mr-auto mt-2 ml-4 text-purple">
<h6>© All rights reserved to Giulia Giordano
</h6>
</div>
<div class="ml-auto mr-4">
<a class="mr-3" href="https://www.instagram.com/grappaiulia/">
<img alt="instagram" src="icone/instagram.png" title="instagram" width="20"></a>
<a class="mr-3"
href="https://www.behance.net/giulia_giordano?tracking_source=search_users_recommended|giulia giordano"
target="_blank">
<img alt="behance" src="icone/behance.png" title="behance" width="20">
</a>
</div>
</div>
</footer>
</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>
Комментарии:
1. Спасибо, что разместили здесь свой вопрос. Извините, но мне немного сложно понять, поскольку вы так много всего добавили. Можете ли вы попытаться быть очень конкретным?
Ответ №1:
У вас есть основной заголовок (графический дизайн) и подзаголовки (01 и 02) в разных классах структуры и стиля. Поскольку эти разные теги и классы имеют разные стили css, вы увидите разницу.
Кроме того, очень возможно, что вы добавляете стили полей для своих заголовков. Это означает, что ваши дочерние элементы имеют запас для себя, а также запас для своих родительских элементов.
Комментарии:
1. большое спасибо за объяснение, я новичок, и я был немного смущен!