如何設置網站標題正確和下面名稱使用引導3.3.7v

我想添加標題到我的網站，但我沒有得到如何使用引導3.3.7v做到這一點。這是我正在使用的代碼。當我使用css作爲標題時，我的導航欄顯示在標誌下，但我將它們並排放置。我需要在網站名稱下方顯示徽標和網站名稱，並且網站名稱的權利很少。如何設置網站標題正確和下面名稱使用引導3.3.7v

<link 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
rel="stylesheet" /> 
<nav class="navbar navbar-inverse" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data- 
toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

      <div class="nav-logo"> 
    <span> <img src="images/logo.png" alt="logo" height="100" alt="logo" /> 
     </span> 
    &nbsp;&nbsp;&nbsp;&nbsp;<h2>MyWebsite</h2> 
    <div class="caption text-left" >CaptionHere</div> 

    </div> 


     </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar- 
collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="about.html">About</a> 
       </li> 
       <li> 
        <a href="services.html">Services</a> 
       </li> 
       <li> 
        <a href="contact.html">Contact</a> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data- 
toggle="dropdown">Portfolio <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li> 
          <a href="portfolio-1-col.html">1 Column 
Portfolio</a> 
         </li> 
         <li> 
          <a href="portfolio-2-col.html">2 Column 
Portfolio</a> 
         </li> 
         <li> 
          <a href="portfolio-3-col.html">3 Column 
Portfolio</a> 
         </li> 
         <li> 
          <a href="portfolio-4-col.html">4 Column 
Portfolio</a> 
         </li> 
         <li> 
          <a href="portfolio-item.html">Single Portfolio 
Item</a> 
         </li> 
        </ul> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data- 
toggle="dropdown">Blog <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li> 
          <a href="blog-home-1.html">Blog Home 1</a> 
         </li> 
         <li> 
          <a href="blog-home-2.html">Blog Home 2</a> 
         </li> 
         <li> 
          <a href="blog-post.html">Blog Post</a> 
         </li> 
        </ul> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data- 
toggle="dropdown">Other Pages <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li> 
          <a href="full-width.html">Full Width Page</a> 
         </li> 
         <li> 
          <a href="sidebar.html">Sidebar Page</a> 
         </li> 
         <li> 
          <a href="faq.html">FAQ</a> 
         </li> 
         <li> 
          <a href="404.html">404</a> 
         </li> 
         <li> 
          <a href="pricing.html">Pricing Table</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 

    </div> 
    <!-- /.container --> 
    </nav>

來源

2017-08-09 Bharath Pateru

.nav-logo, 
 
.caption.text-left { 
 
    color: #eee; 
 
} 
 

 
.logocaption { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-inverse" role="navigation"> 
 
    <div class="container"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data- toggle="collapse" data- target="#bs-example-navbar-collapse-1"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <div class="nav-logo"> 
 
     <span> <img src="http://placehold.it/200x100" height="100" alt="logo" /> 
 
    </span> 
 
     <div class="logocaption"><h2>MyWebiste</h2> 
 
     <div class="caption text-left">CaptionTextHere</div></div> 
 
     <!-- Caption text should be little right and under to MyWebiste Name --> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav>

來源

2017-08-09 12:08:41 Dhaarani

我嘗試了你的建議，但它不起作用我給了完整的導航，當我根據你的建議更改我的菜單時，顯示在標誌，網站名稱和標題下。 –

請參閱https://prnt.sc/g6akpg，我想在鏈接中顯示與Lightshot徽標相同的內容。 –

@Bharath Pateru現在檢查我的更新代碼 – Dhaarani

如果你想右對齊，用戶text-right。

<nav class="navbar navbar-inverse" role="navigation"> 
    <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data- toggle="collapse" data- target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <div class="nav-logo"> 
     <span> <img src="http://placehold.it/200x100" height="100" alt="logo" /> 
    </span> 
     <h2>MyWebiste</h2> 
     <div class="caption text-right">CaptionTextHere</div> 
     <!-- Caption text should be little right and under to MyWebiste Name --> 
     </div> 
    </div> 
    </div> 
</nav> 

<style> 
.nav-logo, 
.caption { 
    color: #eee 
} 
</style>

檢查這裏：https://jsfiddle.net/wsvvg68e/1/

來源

2017-08-09 11:23:54

我需要根據網站名稱有點好，但不是對齊顯示。 –

在標題標籤中的文字會直接顯示（只是在網站的名稱）寫入DIV/span標記。換句話說：標題標籤實際上對瀏覽器不可見。看看附加的截圖。你需要添加一些div標籤，把class name放在裏面，然後應用css屬性來對齊它。 http://prntscr.com/g6akpg 像

.caption { 
    color: white; 
    margin: 0 30px; 
}

來源

2017-08-09 11:29:42

它顯示在網站名稱旁邊，但我需要在（我的意思是下一行）下顯示網站名稱，而且它的權利很小。 –

請參閱Lightshot徽標，名稱和標題。我試圖達到相同的效果 –

如何設置網站標題正確和下面名稱使用引導3.3.7v

回答

相關問題