Question

Bootstrap 3.3.7列大不按预期工作。但奇怪的部分是。当我尝试使用bootstrap 4.它工作得很好。我不知道问题的来源。除此之外。 bootstrap 4改变了我的文字大小。而且我不想升级。

我的引导程序在我的应用程序中完美链接。那里没有问题。我需要帮助，为什么bootstrap 3.3.7列大不工作。

这是我的代码

base.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文件运行良好没有问题。我不明白。有人帮忙！

Answer 1

当窗口宽度不足时，列会相互叠加。因此，如果您编写col-lg-6并且窗口宽度小于lg断点的宽度，则这些列将放在彼此的顶部。

Bootsrap 3和4有不同的断点，这就是为什么你看到它们之间存在差异的原因。（Bootstrap 3 breakpoints和Bootstrap 4 breakpoints）

尝试使用col-md-6编写col-lg-6。

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

1 个答案: