2016-06-12 6 views
0

は、私は次のようにfooter粘着性のCSSが定義されている:私のブートストラップフォームの下に線が引かれているのはなぜですか?

#foot { 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    height:30px; 
    width:100%; 
    text-align: right; 
    padding-top: 7px; 
    font-size: small; 
    background-color: none; 
} 

は何の水平線のように見えることはすべてform秒の下部に表示されます。 position: fixed(またはabsolute)を削除すると、その行は表示されません。

.panel-default { 
    border-color: #ddd; 
} 

はこれだけでは、このルールをリセット:メインのindex.html

<!DOCTYPE html> 

<html lang="en" data-ng-app="wtApp"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> 
     <meta name="fragment" content="!"> 
     <meta name="google-site-verification" content="yVui_k1sbN4TDHx-yDmol0MzU1QXaTTGlhNa_gVLzUs" /> 
     <title>Writer's Tryst, where authors and publishers, producers, agents meet.</title> 
     <meta name="description" content="A better way for writers to find publishers, producers and agents" /> 
<!--  <base href="/" /> --> 
     <link href='https://fonts.googleapis.com/css?family=Lobster+Two:700italic' rel='stylesheet' type='text/css'> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" data-integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" data-crossorigin="anonymous"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" data-integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" data-crossorigin="anonymous"> 
     <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> 
     <link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.css" /> 
     <link rel="stylesheet" href="css/main.css" /> 
     <link rel="stylesheet" href="css/shares.css" /> 
     <link rel="shortcut icon" href="img/icons/writers-tryst.png" /> 
    </head> 
    <body data-ng-controller="mainController"> 
     <header> 
      <nav class="navbar navbar-light"> 
       <div class="container-fluid"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Writers-Tryst"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
         <a class="navbar-brand" href="#"><img id="logo" src="img/writers-tryst-logo.png" alt="logo" /></a> 
         <div id="shares"> 
          <!-- Twitter --> 
          <a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<TEXT>&via=<VIA>" target="_blank" title="twitter" class="share-btn twitter"> 
           <i class="fa fa-twitter"></i> 
          </a> 

          <!-- Google Plus --> 
          <a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus"> 
           <i class="fa fa-google-plus"></i> 
          </a> 

          <!-- Facebook --> 
          <a href="http://www.facebook.com/sharer/sharer.php?u=http://writers.tryst.com" target="_blank" title="facebook" class="share-btn facebook"> 
           <i class="fa fa-facebook"></i> 
          </a> 

          <!-- StumbleUpon (url, title) --> 
          <a href="http://www.stumbleupon.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn stumbleupon"> 
           <i class="fa fa-stumbleupon"></i> 
          </a> 
          <!-- Reddit (url, title) --> 
          <a href="http://reddit.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn reddit"> 
           <i class="fa fa-reddit"></i> 
          </a> 
          <!-- LinkedIn --> 
          <a href="http://www.linkedin.com/shareArticle?url=http://writers.tryst.com&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" title="linked-in" class="share-btn linkedin"> 
           <i class="fa fa-linkedin"></i> 
          </a> 
         </div> 
        </div> <!--navbar-header--> 
        <div class="collapse navbar-collapse" id="Writers-Tryst"> 
         <ul class="nav navbar-nav"> 
          <li class="active"><a id="homepage" href="/"><i class="glyphicon glyphicon-home"></i> Home</a></li> 
          <li><a href="#writers" class="glyphicon glyphicon-book"> Writers</a></li> 
          <li><a href="#enablers" id="enablers-link" class="glyphicon glyphicon-thumbs-up"> Enablers</a></li> 
          <li><a href="#about" class="glyphicon glyphicon-info-sign"> About</a></li> 
          <li><a href="#privacy" class="glyphicon glyphicon-info-sign"> Privacy/Rules</a></li> 
          <li><a href="#contact" class="glyphicon glyphicon-envelope"> Contact</a></li> 
         </ul> 
         <ul class="nav navbar-nav navbar-right"> 
          <li><a id="login" href="#log-in"><i class="glyphicon glyphicon glyphicon-log-in"></i> Log-In</a></li> 
          <li><a id="create-account-link" href="#accounts"><i class="glyphicon glyphicon-user"></i> Create Account</a></li> 
          <li class="dropdown"> 
           <a href="#" id="drop-toggle-1" class="dropdown-toggle glyphicon glyphicon-user" data-toggle="dropdown" role="button" data-aria-haspopup="true" data-aria-expanded="false">Dropdown <span class="caret"></span></a> 
           <ul class="dropdown-menu"> 
            <li><a id="#update-profile" href="update-profile">Update profile</a></li> 
            <li><a id="#manage-uploads" href="manage-uploads">Manage uploads</a></li> 
           </ul> 
          </li> 
          <li ><a id="#reset-pwd-link" href="reset-pwd"></a></li> 
         </ul> 
        </div> <!--navbar-collapse--> 
       </div> <!--container fluid--> 
      </nav> 
     </header> 
     <div> 
      <div id="message" class="alert m-t-10"></div> 
      <div id="main" class="content"> 
       <!-- angular templating --> 
       <!-- this is where content will be injected --> 
       <div data-ng-view></div> 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div id="foot" class="text-right small">&#169; 2016 Ronald Tornambe, Inc.</div> 
     </div> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
     <script src="js/common.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> 
     <script src="js/pages.js"></script> 
     <script> 
      $("#drop-toggle-1").on("click", function (e) { 
       e.preventDefault(); 
      }); 
     </script> 
    </body> 
</html> 

答えて

1

ブートストラップpanelには、境界線とボックスシャドウがあります。あなたは自分のログインセクションの下の境界線について話している場合、それは...

.panel { 
    border-width:0; 
    box-shadow:none; 
} 

http://www.codeply.com/go/CMWIpp8FAE

1

それがブートストラップで、このルールから来て、CSS - ここ

test site

HTMLですカスタムCSSは次のようになります:

.panel-default { 
    border-color: transparent; 
} 
1

が好き

オーバーライドは、それが理由

罫線を適用クラスパネルは次のとおりです。 1pxソリッド透明。本部

1

クラス上の

<div class="panel panel-default"> 

:「パネル」border: 1px solid transparent;とクラスが追加されます:「パネル・デフォルト」border-color: #ddd;を追加するので、あなたのフッターに境界線を取得しています。

.panel {border:none;} 

あなたのCSSにこれを追加することによって、それを修正することができます

関連する問題