Bootstrap H1對齊問題

我需要幫助讓我的H1對齊。我的代碼如下。它的圖像也在下面。我希望頂部的斯賓塞Hiltbrand位能夠一路走到最前面。美麗的網站，鼓舞人心的攝影部分現在是相同的。我正在使用Bootstrap。Bootstrap H1對齊問題

首頁：

.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>

來源

2016-02-04 Spencer Hiltbrand

將'text-right'類添加到'h1'標籤？另外你爲什麼要把一個容器放在一個部分內。這是相反的。更何況，你不關閉你的'h1'標籤，你有''而不是... – Darren

以下列出的HTML行，你必須是無效的：

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

你已經從一個h1標籤，但從來沒有關閉它，因爲你嘗試c用h4標記丟失它。如果樣式不起作用，這可能會導致部分問題。

要回答您的實際問題，只需使用float: right而不是text-align: right即可輕鬆獲得您的頂級品牌/文本。

來源

2016-02-04 05:14:13 michael

不，它就像一個保證金錯誤，我認爲，因爲當我用padding標籤更加正確時，它只是走到下一行，沒有更多。 –

您需要提供更多的代碼，因爲根據您的具體情況，您描述的效果不存在，所以必須有其他內容導致此問題。 – michael

如果您需要對齊的所有標題的右側，那麼你需要擺脫container，row和col-lg-12因爲他們引進padding和margins。標題的margin-top從頂部變化不大。請看看HTML，CSS及其工作demo。

HTML

<!-- 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>

CSS

.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; 
}

不過，如果你要使用自舉的container, row and col-*的，那麼你就需要修改現有的HTML。

來源

2016-02-04 05:45:21 Shashank

Bootstrap H1對齊問題

回答

相關問題