2016-12-28 10 views
3

これは気になりました。たとえば、私はformsubmitボタンを動かして揃えようと試みていましたが、私のラップトップをスリープ状態にするまで、すべてうまく動いていました。私は戻ってきてすぐにもう更新されません。それから私は私の家を去らなければならなかったので、私はそれを眠りに戻しました、そして、私が戻って私のウェブサイト(localhost)をリフレッシュしたとき、変更が適用されました。ここに私のテンプレートコードがあります:ブートストラップを無効にしてもすぐに反映されません

{% load staticfiles %} 

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Bootstrap 101 Template</title> 

    <!-- Bootstrap --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 


    <link rel="stylesheet" href="{% static 'css/bootstrap-theme.css' %}"> 
    <link rel="stylesheet" href="{% static 'css/bootstrap-override.css' %}"> 
    <script src="{% static 'js/bootstrap.min.js' %}"></script> 



    </head> 
    <body> 
    <nav class="navbar navbar-inverse navbar-static-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">About</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Design</a></li> 
         <li><a href="#">Development</a></li> 
         <li><a href="#">Consulting</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
      <form method="POST" class= "post-form navbar-form"> {% csrf_token%} 
      {{ form.as_p }} 
      <button type='submit' class="save btn-default">Submit</button> 
     </form> 
     </div> 

    </div> 
</nav> 



<div class="container"> 
    <div class ="row"> 
     <div class ="col-md-12"> 


     </div> 

    </div> 
    <div class="row"> 
     <div class="col-md-4"> 
      <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> 
      <h3>Personal Training</h3> 
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p> 
     </div> 
     <div class="col-md-4"> 
      <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> 
      <h3>Physiotherapy</h3> 
      <p>Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor.</p> 
     </div> 
     <div class="col-md-4"> 
      <span class="glyphicon glyphicon-console" aria-hidden="true"></span> 
      <h3>Boxing</h3> 
      <p>Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p> 
     </div> 

    </div> 
</div> 
</script> 
    </body> 
</html> 

ここに私のカスタムCSSファイルです:

.navbar { 
    margin-bottom: 500px; 
} 

.save-btn-default { 
    position: relative;left:425px;top:-47px; 
} 

.post-form { 
    position: relative;right:275px;top:-30px; 
} 

原因このましたか?

+1

なぜ 'bootstrap.min.js'と' jquery.min.js'を2回追加するのですか?カスタムスタイルシートが最後のものであることを確認してください。 –

+0

私は2つのチュートリアルに従っていたと思います。私は両方を入れました。 'jquery.min.js'を除外するコードを編集し、デフォルトのテーマの下にカスタムCSSを配置しました。 – Amon

+0

@MuhammadUsmanだから問題は再び現れたようだ。それはサーバーとは何か?毎回すぐに更新できない機能がありますか?私は自分のコードを編集して、私が何を変更したのかを示します。要素を調べると、私が与えた仕様は変更されていないことがわかります。 – Amon

答えて

3

1)ここでは、bootstrap.min.jsとjquery.min.jsを2回追加しました。

2)ヘッドタグを閉じる前にカスタムCSSを書き込む方がよい。

+0

トリックをしたようですね。 'jquery.min.js'行の後にカスタムスタイルシートを置くべきですか?私はそれを前に置いてそれが働いている – Amon

関連する問題