时间戳

首页 > 解决方案 > 如何在我的网站的移动版本中对齐某些元素？

html - 如何在我的网站的移动版本中对齐某些元素？

问题描述

我想知道如何将一些元素与 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;500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&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%7Cgiulia%20giordano"
                        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>

标签： htmlcss

解决方案

您在不同的结构和样式类中有主标题（图形设计）和副标题（01 和 02）。由于这些不同的标签和类具有不同的 css 样式，您会看到 - 嗯 - 不同。

此外，您很有可能正在为您的子标题堆叠页边距样式。这意味着您的 subs 是他们自己的体验边距，也是其父元素的边距。

推荐阅读