Question

我遇到了Bootstrap和列宽的问题。我的导航栏不会占据整个屏幕的宽度。也许它错过了一些东西，但我没有克服以找到什么。

这是我的截图：

我的剧本：

#Base_Home.html file

<!DOCTYPE html>
<html>
    <body>

    {% if user.is_authenticated %}

        <div class="row">
            <div class="col-lg-12">
                <div class="col-lg-2 sidebar1">

                    <div class="left-navigation">

                         ...

                    </div>
                </div>

                {% endif %}

                {% if user.is_authenticated %}
                <div class="col-lg-10"> 
                        {% include 'Common/Navbar.html' %}

                {% else %}

                <div class="col-lg-12 "> 
                        {% include 'Common/Navbar.html' %}

                {% endif %}

                        {% block content %}
                        {% endblock content %}

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

我的导航栏文件：

#Navbar.html file

{% load staticfiles %}
{% load static %}
{% load user_tags %}
{% load variables %}

<nav class="navbar navbar-inverse">
    <div class="container-fluid">

                <ul class="nav navbar-nav">
                    ... 
                </ul> 
    </div>
</nav>

最后我的CSS文件根据两个文件：

.navbar-inverse {
    background-color: #2E8CEA;
    width: auto;
    }

.navbar-inverse .container-fluid .navbar-header .navbar-brand {
    color : white !important;
    }

.navbar .nav > li > a {
    padding-right: -20px;
    padding-left: -20px;
    color:  white !important;
    }

.navbar .nav > li > a:hover {
    opacity: 0.7;
    }

.col-lg-10 {
    padding-left: 0px;
       }

.sidebar1 {

    background: white;
    padding:0%;
    min-height: 100%;
    width:12%;
    height:100%;
    border-style: solid;
    border-width: 1px;
    border-color: #E0E0E0;
    box-shadow: 0.5px 0.5px 0.5px;
}

img.img-responsive.center-block {
    width:8vw;
    padding-right:auto;
    padding-top: 1vw;
    padding-bottom: 1vw;
}

.container-fluid .text-muted {

color:#2E8CEA !important;
padding-left:auto;
background-color: transparent;
}

.navbar-right {
        position:absolute; 
        right: -13vw;
    }

.marginBottom-0 {
    margin-bottom:0;
    }

html, body {
height: 100%;
}

编辑：

我尝试使用Bootstrap 3.3.7和bootstrap 4.0.0

Html来源：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="{% get_static_prefix %}{{ mytheme }}/css/Base_Identity.css"/>

Answer 1

您希望将行添加到容器，将列添加到行，如下所示：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="row">
        <div class="col-2 bg-success">
          sidebar
        </div>
        <div class="col-10 bg-danger">
          main
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

与上述答案一样，您需要声明您的行。 Bootstrap会在行中运行，然后在页面中向下运行。

引导colomns和宽度问题

2 个答案: