这是我的代码,在本地主机上运行良好,但在托管上无法运行。
{% extends 'layout2.html' %}
{% block content %}
<div class="container">
<div class="row">
<ol class="col-12 breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
<li class="breadcrumb-item active">Menu</li>
</ol>
<div class="col-12">
<h5 style="font-size: 30px">Menu</h5>
<hr>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm">
<!-- card start -->
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="../static/images/cake.jpeg" alt="Cake" style="width:100%;height: 185px;">
<div class="card-body">
<h5 class="card-title">Cake <span class="badge badge-danger">HOT</span> <span class="badge badge-light">Rs.250</span></h5>
<h2></h2>
<p class="card-text">Different varities of cakes. With customized design. You can select you own flavour. Click below to view details and order.</p>
<a href="#" data-toggle="modal" data-target="#myModal" class="btn btn-primary" style="width: 100%"> View Details</a>
<!-- <button type="button" class="btn btn-info btn-lg" >Open Modal</button> -->
<!-- Modal-1 -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Order cake now.</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">
<img src="../static/images/cake.jpeg" alt="" style="widows: 100px;height: 185px;">
</div>
<div class="col-md-8">
<address >
<h6> Product Name: Cake</h6>
<h6> Product Flavour: customized</h6>
<h6> Product category: Best seller</h6>
<hr>
<h6> Availible in both veg and non-veg.</h6>
<h6> Weight of cake is as per customer reqirement.</h6>
<h6> You can place order below.</h6>
</address>
</div>
</div>
<hr>
<form action="{% url 'home' %}" method="POST">
{% csrf_token %}
<div class="form-row">
<div class="col-md-6">
<label>Customer Name</label>
<input type="text" placeholder="Full Name" class="form-control" name="name" required>
</div>
<div class="col-md-6"> <label>Email</label>
<input type="email" placeholder="@gmail.com" class="form-control" name="email" required></div>
</div>
<div class="form-row">
<div class="col-md-6">
<label>Product name</label>
<input type="text" placeholder="Cake" value="cake" class="form-control" name="product" readonly>
</div>
<div class="col-md-6"> <label>Select category</label><br>
<select name="category" id="" style="width:180px">
<option value="Veg">Veg</option>
<option value="Non-veg">Non-veg</option>
</select>
</div>
</div>
<div class="form-row">
<div class="col-md-6">
<label>Quantity</label>
<input type="text" placeholder="Quantity" class="form-control" name="quantity" required>
</div>
<div class="col-md-6"> <label>Mobile</label>
<input type="text" placeholder="Mobile" class="form-control" name="mobile" required></div>
</div>
<div class="form-group">
<label for="">Address</label>
<textarea name="address" id="" cols="100" rows="3" style="width:100%"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Order</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal-1 -->
</div>
</div>
</div>
<!-- card end -->
<div class="col-sm">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="../static/images/pin.jpg" alt="Cake" style="width:100%">
<div class="card-body">
<h5 class="card-title">Rolls <span class="badge badge-danger">HOT</span> <span class="badge badge-light">Rs.20</span></h5>
<h2></h2>
<p class="card-text">A roll can be served and eaten whole or cut transversely and dressed with filling between the two halves.Click below to order.</p>
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal2" style="width: 100%">Order Now</a>
<!-- Modal -->
<!-- Modal-2 -->
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Order now.</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">
<img src="../static/images/pin.jpg" alt="" style="width: 220px;height: 185px;">
</div>
<div class="col-md-8">
<address >
<h6> Product Name: Rolls</h6>
<h6> Product Flavour: Regular</h6>
<h6> Product category: Best seller</h6>
<hr>
<h6> Availible in both veg and non-veg.</h6>
<h6> Made with best flour.</h6>
<h6> You can place order below.</h6>
</address>
</div>
</div>
<hr>
<form action="{% url 'home' %}" method="POST">
{% csrf_token %}
<div class="form-row">
<div class="col-md-6">
<label>Customer Name</label>
<input type="text" placeholder="Full Name" class="form-control" name="name" required>
</div>
<div class="col-md-6"> <label>Email</label>
<input type="email" placeholder="@gmail.com" class="form-control" name="email" required></div>
</div>
<div class="form-row">
<div class="col-md-6">
<label>Product name</label>
<input type="text" placeholder="rolls" value="Rolls" class="form-control" name="product" readonly>
</div>
<div class="col-md-6"> <label>Select category</label><br>
<select name="category" id="" style="width:180px">
<option value="Veg">Veg</option>
<option value="Non-veg">Non-veg</option>
</select>
</div>
</div>
<div class="form-row">
<div class="col-md-6">
<label>Quantity</label>
<input type="text" placeholder="Quantity" class="form-control" name="quantity" required>
</div>
<div class="col-md-6"> <label>Mobile</label>
<input type="text" placeholder="Mobile" class="form-control" name="mobile" required></div>
</div>
<div class="form-group">
<label for="">Address</label>
<textarea name="address" id="" cols="100" rows="3" style="width:100%"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Order</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
</div>
</div>
</div>
<div class="col-sm">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="../static/images/tray.jpeg" alt="Cake" style="width:100%">
<div class="card-body">
<h5 class="card-title">Cookies <span class="badge badge-danger">HOT</span> <span class="badge badge-light">Rs.50 per pack</span></h5>
<h2></h2>
<p class="card-text">These cookie recipes represent the best of the best, including chewy chocolate chip cookies.Click below for order .</p>
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal3" style="width: 100%">Order Now</a>
<!-- Modal -->
<!-- Modal-3 -->
<div id="myModal3" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Order now.</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">
<img src="../static/images/tray.jpeg" alt="" style="width: 220px;height: 185px;">
</div>
<div class="col-md-8">
<address >
<h6> Product Name: Cookies</h6>
<h6> Product Flavour: Regular-chocolate</h6>
<h6> Product category: Best seller</h6>
<hr>
<h6> Availible in both veg and non-veg.</h6>
<h6> Made with best flour.</h6>
<h6> You can place order below.</h6>
</address>
</div>
</div>
<hr>
<form action="{% url 'home' %}" method="POST">
{% csrf_token %}
<div class="form-row">
<div class="col-md-6">
<label>Customer Name</label>
<input type="text" placeholder="Full Name" class="form-control" name="name" required>
</div>
<div class="col-md-6"> <label>Email</label>
<input type="email" placeholder="@gmail.com" class="form-control" name="email" required></div>
</div>
<div class="form-row">
<div class="col-md-6">
<label>Product name</label>
<input type="text" placeholder="rolls" value="cookies" class="form-control" name="product" readonly>
</div>
<div class="col-md-6"> <label>Select category</label><br>
<select name="category" id="" style="width:180px">
<option value="Veg">Veg</option>
<option value="Non-veg">Non-veg</option>
</select>
</div>
</div>
<div class="form-row">
<div class="col-md-6">
<label>Quantity</label>
<input type="text" placeholder="Quantity" class="form-control" name="quantity" required>
</div>
<div class="col-md-6"> <label>Mobile</label>
<input type="text" placeholder="Mobile" class="form-control" name="mobile" required></div>
</div>
<div class="form-group">
<label for="">Address</label>
<textarea name="address" id="" cols="100" rows="3" style="width:100%"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Order</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal-3 -->
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<!-- <div class="container">
<div class="row">
<div class="col-sm">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="../static/images/pastries.jpeg" alt="Cake" style="width:100%">
<div class="card-body">
<h5 class="card-title">Cake <span class="badge badge-danger">HOT</span> <span class="badge badge-light">$4.99</span></h5>
<h2></h2>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Order Now</a><a href="#" class="btn btn-primary offset-sm-1">Comments</a>
</div>
</div>
</div>
<div class="col-sm">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="../static/images/donuts.jpeg " alt="Cake" style="width:100%">
<div class="card-body">
<h5 class="card-title">Cake <span class="badge badge-danger">HOT</span> <span class="badge badge-light">$4.99</span></h5>
<h2></h2>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Order Now</a><a href="#" class="btn btn-primary offset-sm-1">Comments</a>
</div>
</div>
</div>
<div class="col-sm">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="../static/images/breads.jpg" alt="Cake" style="width:100%">
<div class="card-body">
<h5 class="card-title">Cake <span class="badge badge-danger">HOT</span> <span class="badge badge-light">$4.99</span></h5>
<h2></h2>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Order Now</a><a href="#" class="btn btn-primary offset-sm-1">Comments</a>
</div>
</div>
</div>
</div>
</div>
</div>
-->
{% endblock %}
我使用了引导模式。它在本地主机中运行良好。但是当我在 pythonanywhere 上托管 Django 网站时,所有模式都不起作用。下拉菜单也不起作用。但是除了这两个之外的每个引导组件都工作正常。
引导加载可能存在问题。
在
{% block content %}
标签之后,尝试复制并粘贴到bootstrap的CDN下方。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
如果您的代码有效,请删除上述 CDN 并根据 bootstrap starter 模板调整您的layout2.html https://getbootstrap.com/docs/4.5/getting-started/introduction/
<button data-target="#myModal" ...>
以
id="myModal"
为目标模态,但您的模态具有 id="#myModal"
。
#
前缀表示“id of”(它是一个CSS选择器)。与 .modal
相同,意思是“modal
班级”。
总之,将
id="#myModal"
更改为id="myModal"
即可。
我对你的问题是:如果它在本地工作,这显然意味着在本地你已经正确编写了它。为什么要在上传之前更改它?
原则是:远程上传本地的内容,无需修改任何内容!
除此之外,请注意您还有一堆需要修复的
404
(未找到)错误。回答这个问题可能已经晚了,但不要忘记每次静态文件更改时在生产服务器上运行collectstatic。