2017-12-09 5 views
0

私はウェブページの上部を3:6の比率のグリッドにするようにしようとしました。左側のセクションは正方形のイメージです。右側のセクションは2で水平に分割され、上半分はタイトルと下半分のナビゲーションバーのバーになります。これは私のコードです。 unfortuanetlyタイトルが表示されていないと、画像がナビゲーションバーの上に表示され、また、画面の幅を埋めることはありません。私は実際に何が問題かわからない。どんな助けも素晴らしいだろう!タイトルのおかげで角度ブーツストラップ4ウェブアプリでのナビゲーションバー、ロゴ、タイトルのスタイル設定方法は?

<div class="col-sm-6 col-md-3 col-lg-3 col-xl-3"> 
    <img ng-src="img/sky-logo.jpg" width="200px"/> 
    </div> 

    <div class="col-sm-6 col-md-9 col-lg-9 col-xl-9 "> 

    <div id="top"> 
    <div class="container"> 
    <div class="clearfix"> 
     <div class="pull-center"><title> title </title></div> 
    </div> 
    </div> 
    </div> 

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> 
    <ul class="navbar-nav"> 
    <li class="nav-item"> 
    <a class="nav-link" href="#link1">link 1</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" href="#link2">link 2</a> 
    </li> 
    </ul> 
</nav> 

</div> 
    <div ng-view></div> 
</body> 

答えて

0

<title>タグは、ブラウザのツールバーのタイトルを定義し、あなたは以下のコードを試すことができます説明したレイアウトに<head></head>

に配置されるべきであるあなたの代わりに見出しを使用する必要があります

<div class="col-sm-12"> 
     <!-- for ratio 3:6 --> 
     <div class="col-sm-4"> 
      <img ng-src="img/sky-logo.jpg" style="width:200px" /> 
     </div> 
     <!-- for ratio 3:6 --> 
     <div class="col-sm-8"> 
      <!-- top half --> 
      <div class="col-sm-12"> 
       <div id="top"> 
        <div class="container"> 
         <div class="clearfix"> 
          <div class="pull-center">title</div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <!-- bottom half --> 
      <div class="col-sm-12"> 
       <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> 
        <ul class="navbar-nav"> 
         <li class="nav-item"> 
          <a class="nav-link" href="#link1">link 1</a> 
         </li> 
         <li class="nav-item"> 
          <a class="nav-link" href="#link2">link 2</a> 
         </li> 
        </ul> 
       </nav> 
      </div> 
     </div> 
    </div> 
関連する問題