これは気になりました。たとえば、私はform
とsubmit
ボタンを動かして揃えようと試みていましたが、私のラップトップをスリープ状態にするまで、すべてうまく動いていました。私は戻ってきてすぐにもう更新されません。それから私は私の家を去らなければならなかったので、私はそれを眠りに戻しました、そして、私が戻って私のウェブサイト(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;
}
原因このましたか?
なぜ 'bootstrap.min.js'と' jquery.min.js'を2回追加するのですか?カスタムスタイルシートが最後のものであることを確認してください。 –
私は2つのチュートリアルに従っていたと思います。私は両方を入れました。 'jquery.min.js'を除外するコードを編集し、デフォルトのテーマの下にカスタムCSSを配置しました。 – Amon
@MuhammadUsmanだから問題は再び現れたようだ。それはサーバーとは何か?毎回すぐに更新できない機能がありますか?私は自分のコードを編集して、私が何を変更したのかを示します。要素を調べると、私が与えた仕様は変更されていないことがわかります。 – Amon