ブートストラップを使用して名前の右下にウェブキャプションを設定する方法3.3.7v

Question

私のウェブサイトにキャプションを追加しようとしていますが、ブートストラップ3.3.7vを使用してこれを行う方法がわかりません。これは私が使用しているコードです。キャプションにCSSを使用すると、ナビゲーションバーがロゴの下に表示されますが、私はそれらを左右に持っています。私はロゴとウェブサイトの名前を横に並べて表示する必要があります。キャプションはウェブサイトの名前の下にあり、ウェブサイトの名前はほとんど表示されません。

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

Answer 1

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

Answer 2

あなたが右揃えにしたい場合は、ユーザー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/

Answer 3

キャプションタグ内のテキストは、直接（単にサイトの名前の下）のdiv/spanタグに書き込ま表示されます。 つまり、キャプションタグは実際にブラウザには表示されません。スクリーンショットを添付してご覧ください。 divタグを追加してクラス名を入れ、CSSプロパティを適用して少し右揃えにする必要があります。 http://prntscr.com/g6akpgは

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