2017-02-05 2 views
0

私はブートストラップnavbarでhtmlページを持っています。サイトコンテンツを保持するメインコンテナがあります。メインコンテナには、ナビゲーションバーの後にコンテンツを開始するために適用される上部パディングがあります。このため、湾曲した境界線は上の境界線に表示されません。下部には、曲線の境界線がうまく機能しています。湾曲したボーダーは、ナビゲーションバーのために隠されます

上端にも曲線ボーダーを表示するCSSソリューションはありますか?

フィドルhttps://jsfiddle.net/LijoCheeran/cttstnob/3/

HTML

<body class="bodybackground"> 

<div class="navbar navbar-inverse navbar-fixed-top ui-widget-header"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#" style="padding-top:0px; padding-bottom:2px;"> 
        <div id="divBrandNameText" class="cookieFontGoogle" style="display:inline-block;color:#FFFFFF; vertical-align:central;">Brand</div> 
       </a> 
      </div> 
      <div class="navbar-collapse collapse">   
      </div> 
     </div> 
    </div> 

    <div id="mainContainer" class="container body-content" style="padding-top:60px; background-color:#FFFFFF"> 
     Test 
     <div style=" padding-top:100px;"> 
     A 
     </div> 
     B 
    </div> 

    </body> 

CSS

.navbar { 
     background-color: #00A0F0; 
    } 
    .navbar-fixed-top { 
     border-bottom: 1px solid #0078A0; 
    } 
    .navbar-inverse .navbar-nav > li > a { 
     color: #FFFFFF; 
     font-weight: bold; 
    } 
     .navbar-inverse .navbar-nav > li > a:hover, 
     .navbar-inverse .navbar-nav > li > a:focus { 
      color: #737373; 
      font-weight: bold; 
     } 
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { 
     color: #FFFFFF; 
     background-color: #00A0F1; 
    } 
     .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, 
     .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { 
      color: #FFFFFF; 
      font-weight: bold; 
     } 
    .navbar-inverse .navbar-nav > .open > a, 
    .navbar-inverse .navbar-nav > .open > a:hover, 
    .navbar-inverse .navbar-nav > .open > a:focus { 
     color: #FFFFFF; 
     font-weight: bold; 
     background-color: #00A0F1; 
    } 
    .cookieFontGoogle { 
     font: 200 50px/1.3 'Cookie', Helvetica, sans-serif; 
     color: #fff; 
     text-shadow: 4px 4px 3px rgba(0,0,0,0.1); 
    } 

    #mainContainer { 
    border-radius: 25px; 
    } 

    .bodybackground { 
     background-color: #A9D5E7; 
    } 

答えて

2

変更パディングマージン

<div id="mainContainer" class="container body-content" style="margin-top:60px; background-color:#FFFFFF"> 
関連する問題