2016-03-21 6 views
1

これまでのところ、このページを作成したBootstrapの例を見てみると、コピーして貼り付けて問題を再現することができます。私の質問は、ホームナビゲーションリンクが他のナビゲーションリンクより高くなる原因となったことは間違っていますか? <a href="#">最初のタブの高さは他のタブと異なります

以下にそれを修正する必要がありますが正しくタグを閉じなかった

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset = "UTF-8"> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>    

     <title>Welcome</title> 
    </head> 

    <body> 
     <div class="container"> 
      <div class="jumbotron"> 
       <h1>Test Page Bootstrap 3</h1> 
       <p>Watch this page grow as we learn more!</p> 
       <a href="#" class="btn btn-primary btn-lg">More Detail <span class="glyphicon glyphicon-chevron-right"></span> </a> 

      </div> 
     </div> 

     <div class="container"> 
      <ul class="nav nav-tabs"> 
       <li class="active"> <a href="#">Home</li> 
       <li> <a href="#">Menu 1</li> 
       <li> <a href="#">Menu 2</li> 
       <li> <a href="#">Menu 3</li> 
      </ul> 
     </div> 
    <div class="container"> 
     <div class="row"> 

      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <p> Paragraph1..erfjhjhfdjfhdgfd sfdghfsyfgdfd dsfsdf dsfsdf 
       dsfdsfsdf ysdff7y er7yf73f ef ffs sf.</p> 
      </div> 

      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <p> Paragraph2...Oh dfifuhyf y fdf erf7yf7ds6 
       dfsdfy efr98y efr7y cuhf dfiuhf7 y efyef</p> 
      </div> 

      <div class="clearfix visible-md"></div> 


      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <p> Paragraph3...yey efd dsfij 8777 e4r8ef8c7 3434 f87cersjdkh dffff erer eee</p> 
      </div> 

      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> 
       <p> Paragraph4...Test paragrapg1 1233 eff long text lorum spoz</p> 
      </div> 

      <div class="clearfix visible-lg"></div> 

     </div> 
    </div> 
</body> 

+1

はこれを参照してくださいここでenter image description here

は、全体のページですフィドルと必要な変更を行うhttp://jsfiddle.net/ xfw8t/12 / – Santhucool

答えて

1

 <div class="container"> 
      <ul class="nav nav-tabs"> 
       <li class="active"> <a href="#">Home</a></li> 
       <li> <a href="#">Menu 1</a></li> 
       <li> <a href="#">Menu 2</a></li> 
       <li> <a href="#">Menu 3</a></li> 
      </ul> 
     </div> 
関連する問題