Bootstrap H1对齐问题

Question

我需要帮助让我的H1对齐。我的代码如下。它的图像也在下面。我希望顶部的Spencer Hiltbrand位于右侧。美丽的网站，鼓舞人心的摄影部分与现在一样。我正在使用Bootstrap。

主页：

.intro {
    color: white;
    font-weight: 600;
    text-align: left;
    font-size: 80px;
    margin-left: 45px !important;
    padding-top: 380px;
}

.name {
    text-align: right !important;
}

<!-- Intro Section -->
    <section id="intro" class="intro-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="name"><span class="red">Spencer</span> Hiltbrand</h4>
                    <h1 class="intro"><span class="red">Beautiful</span> Websites, <br>and <span class="red">Inspiring</span> Photography</h1>
                </div>
            </div>
        </div>
    </section>

Answer 1

您拥有的以下HTMl行无效：

<h1 class="name"><span class="red">Spencer</span> Hiltbrand</h4>

您从h1标记开始，但从未关闭它，因为您尝试使用h4标记将其关闭。如果样式不起作用，这可能会导致部分问题。

要回答您的实际问题，只需使用float: right代替text-align: right即可轻松获得您的顶级品牌/文字。

Answer 2

如果您需要将标题全部对齐，那么您需要摆脱container，row和col-lg-12，因为它们会引入padding和{{ 1}}。标题margins从顶部变化不大。请查看HTML，CSS及其工作demo。

<强> HTML

margin-top

<强> CSS

<!-- Intro Section -->
<section id="intro" class="intro-section">
    <div>
        <h1 class="name"><span class="red">Spencer</span> Hiltbrand</h1>
        <h1 class="intro"><span class="red">Beautiful</span> Websites, <br>and <span class="red">Inspiring</span> Photography</h1>
    </div>
</section>

如果你必须使用bootstrap＆＃39; .intro { color: white; font-weight: 600; text-align: left; font-size: 80px; margin-left: 45px !important; padding-top: 380px; } .name { text-align: right; margin: 5px 0 0 0; } ，那么你需要修改现有的html。