gpt4 book ai didi

html - Bootstrap 3.3.7 网格系统列大剂量不起作用

转载 作者:行者123 更新时间:2023-11-28 03:07:07 25 4
gpt4 key购买 nike

Bootstrap 3.3.7 Column large 未按预期工作。但奇怪的是。当我尝试使用 bootstrap 4 时,它运行良好。我不知道问题出在哪里。除此之外。 bootstrap 4 更改了我的文本的大小。而且我不想升级。

我的 Bootstrap 在我的应用程序中完美链接。那里没有问题。我需要帮助了解为什么 bootstrap 3.3.7 column large 无法正常工作。

这是我的代码

基础.html

<html>

{% load static %}
<link rel="stylesheet" href=" {% static 'assets/css/main.css' %} " />
<link rel="stylesheet" href=" {% static 'assets/bootstrap/css/bootstrap.css' %} ">
<link rel="stylesheet" href=" {% static 'assets/bootstrap/css/bootstrap.min.css' %} ">
<link rel="stylesheet" type="text/css" href=" {% static 'assets/css/responsive.css' %} ">
<script src=" {% static 'assets/js/jquery.js' %} "></script>
<script src=" {% static 'assets/js/script.js' %} "></script>

{% block content %}

{% endblock content %}

<div id="footer" class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<h3> Get to know us </h3>
<div>
<label> Work with US </label>
<label> Work with US</label>
<label> Work with US </label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<h3> Learn with US </h3>
<div>
<label>Work with US </label>
<label> Work with US </label>

</div>
</div>

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<h3> Work with US </h3>
<div>
<label> work with us </label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<h3> Find us </h3>
<img class="img-responsve" src=" {% static 'assets/images/facebook.png' %} ">
<img class="img-responsve" src=" {% static 'assets/images/twitter.png' %} ">
<img class="img-responsve" src=" {% static 'assets/images/instagram.jpg' %} ">
</div>
</div>
<h4 class="text-center"> title Copyright 2017 all rights reserved </h4>
</div>

这是我扩展 base.html 的另一个页面

{% extends 'index/base.html' %}


{% block content %}

<div class="wrapper">
<div id="top_navbar" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand"> title</a>
</div>
<div style="margin: 10px;" class="navbar navbar-right">
<button class="btn btn-success"> 4648564864</button>
<button class="btn btn-info"> Signup </button>
<button class="btn btn-primary"> login </button>
</div>
</div>
</div>

<div class="container-fluid">
<div class="col-lg-4">
<div class="row">
<div class="col-lg-6">
<h3 id="test"> Testing </h3>
</div>
<div class="col-lg-6">
<h3 id="test"> Testing </h3>
</div>
</div>
</div>
</div>
</div>

{% endblock content %}

我的其他 django 文件运行良好,没有问题。我不明白。有人帮忙!

最佳答案

当窗口宽度不够时,列会相互重叠。因此,如果您编写 col-lg-6 并且窗口宽度小于 lg 断点的宽度,那么这些列将彼此重叠。

Bootsrap 3 和 4 有不同的断点,这就是您看到它们之间差异的原因。 (Bootstrap 3 breakpointsBootstrap 4 breakpoints)

尝试在您编写 col-lg-6 的地方使用 col-md-6

关于html - Bootstrap 3.3.7 网格系统列大剂量不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45896789/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com