Bootstrap：有没有一种相对简单的方法可以让我的页面在移动设备上运行？答案

【问题标题】：Bootstrap : Is there a relatively simple way to make my pages workable on mobile?Bootstrap：有没有一种相对简单的方法可以让我的页面在移动设备上运行？
【发布时间】：2019-03-02 17:26:00
【问题描述】：

我正在开发我的第一个“手工”（即不是 WordPress）网站。使用 Django/Python 和 Bootstrap 4 构建它。尽管我在合同中写道，我没有义务使网站对移动设备友好，但客户要求它在移动设备上工作（客户...... amirite？）。

我正在寻找一些相当简单的方法来使网站在移动设备上更好地运行。

我将专注于一个页面，我们的登录屏幕。这有点难以描述，所以我提供了一些屏幕截图，向您展示随着视口变小会发生什么。

所以...我觉得在 (1) 使顶部导航栏在某个断点处切换到移动式导航栏和 (2) 对其进行编程以保留顶部的填充之间有一个解决方案主 div，以便导航栏“将内容向下推”而不是将其覆盖。

你能帮忙吗？

下面是相关代码：

/*navbar:*/
.brand {
	margin-bottom: 0px;
}

h5.brand {
	color: #e3f2fd;
	font-family: "Arial";
}

.navbar {
	background-color: #2c3b4b;
}

a.nav-link {
	color: white;
}

a.active {
	color: #808080;
}

.navbar .navbar-nav li a:hover {
	color: #808080;
}

/*Main container*/

.container-fluid {
	background-color: #fffef7;
	padding: 0;
}

/*Form:*/
#form-container h3 {
	color: black;
}

#form-container {
	padding: 30px;
  	max-width: 350px;
  	width: 100%;
  	background-color: #fffef7;
  	margin: 0 auto;
  	border-radius: 4px;
  	box-shadow: 8px 8px 5px #36454f;
  	overflow: hidden;
  	margin-bottom: 80px;
}

.panel-heading {
	text-align: center;
}

.panel-default {
	padding-bottom: 50px;
}

.login-links {
	padding-top: 20px;
}

.login-links a {
	font-size: 16px;
}

.btn-reg {
	margin-top: 40px;
}

/*Footer:*/
footer {
	background-color: #2c3b4b;
	padding-top: 30px;
	padding-bottom: 4px;
	padding-left: 30px;
}

.footer-row {
	margin: 0;
}

#footer-container {
	padding: 0;
}

.container2 {
	text-align: center;
}

.container2 p {
	color: white;
}

.container1 h5 {
	color: white;
}

.container1 h4 {
	color: white;
}

.container1 p {
	color: white;
}

.footer-links li a:hover {
    text-decoration: none;
    /*border-bottom: 6px solid white;*/
}

.footer-links li a h5:hover {
    color: #808080;
    /*border-bottom: 3px solid white;*/
}

{% extends 'public_base.html' %}
{% load static %}


{% block load_css %}
    <link rel="stylesheet" type="text/css" href='{% static "css/login.css" %}'>
{% endblock %}


{% block header %}
    <div class="container-fluid" id="navbar-container">
        <nav class="navbar navbar-expand-sm fixed-top">

            <!-- Logo -->
            <a class="navbar-brand"><h5 class="brand">Houston Chamber Music Network</h5></a>

            <!-- Navbar links -->
            <ul class="navbar-nav">
                <li class="navbar-item">
                    <a class="nav-link" href="{% url 'public:welcome' %}">WELCOME</a>
                </li>
                <li class="navbar-item">
                    <a class="nav-link" href="{% url 'public:new_member' %}">REGISTER AS MEMBER</a>
                </li>
                <li class="navbar-item">
                    <a class="nav-link" href="{% url 'public:new_coach' %}">REGISTER AS COACH</a>
                </li>
                <!-- <li class="navbar-item">
                    <a class="nav-link" href="{% url 'public:new_patron' %}">SIGN UP FOR E-NEWSLETTER</a>
                </li> -->
            </ul>

            <!-- Navbar right -->
            <ul class="navbar-nav ml-auto">
                <!-- Link to external login: -->
                <li class="navbar-item">
                    <a class="nav-link active" href="">LOGIN</a>
                </li>
            </ul>
        </nav>
    </div>
{% endblock %}


{% block main_content %}
    <div class="container-fluid" id="main-container">
        <div id="mycarousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="item active">
                    <img class="img-fluid" src='{% static "images/login.jpg" %}' alt="" class="img-responsive">
                    <div class="carousel-caption">
                        <!-- <div class="container-fluid" id="form-container">
                            <div class="row">
                            <div class="col-md-4"></div>
                            <div class="col-md-4">
                                <form role="form" action="" method="POST">
                                    <h1>Login form</h1>
                                    {% csrf_token %}
                                    <input type="text" name="email" placeholder="Email"></input>
                                    <input type="password" name="password" placeholder="Password"></input>
                                    <button type="submit" class="btn btn-dark">Login</button>
                                </form>
                            </div>
                        </div> -->

                        <div class="login-form-container">

                            <form role="form" action="{% url 'users:login_handler' %}" id="form-container" method="post">
                                {% csrf_token %}
                                <h3>MEMBER LOG IN</h3><br>
                                <div class="panel panel-default">
                                    <img class="col-md-8" src='{% static "images/divider9.png" %}' alt="" class="img-responsive">
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <input type="text" name="email" id="email" class="form-control input-sm" placeholder="Email" value="{{ old_data.email }}">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <input type="password" name="password" id="password" class="form-control input-sm" placeholder="Password">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                            <input type="submit" value="LOGIN" class="btn btn-reg btn-info btn-block">
                                    </div>
                                    <div class="col-md-12">
                                        <div class="login-links">
                                            <a href="#">Forgot Password?</a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            
                        <!-- End login-form-container div: -->
                        </div>

                    <!-- End div for carousel caption: -->
                    </div>
           
            
            <!-- End div for carousel inner: -->
            </div>
        <!-- End div for carousel: -->
        </div>
    <!-- End div for main container: -->
    </div>
{% endblock %}

【问题讨论】：

关于问题 1，您可以查看引导文档 Bootstrap navbar docs 中的导航栏切换器。使用切换器，您可以轻松创建汉堡菜单。
一个快速观察：摆脱所有绝对单位（例如“px”）并仅使用相对单位（例如“%”和“em”），让您的页面更具响应性。
另一个问题...有没有办法告诉浏览器将导航栏和页脚与主容器分开？让导航栏和页脚不覆盖主要材料？如果可能的话，这似乎是一个非常简单的解决方案 - 会使“汉堡包”导航栏变得不必要。

标签： html css django twitter-bootstrap

【解决方案1】：

试试这个：

<meta name="viewport" content="width=device-width, initial-scale=1">

如果不是，网格管理器应该为您完成大部分工作。我使用媒体查询，其中有手机提供的不同方向的选项。

这是一个例子：

@media screen only and (max_width: 350px), (orientation: portrait or landscape) {
 #Your ID or tag {

  }
}

网格管理器应提供大部分功能以将您的布局放置在正确的位置。如果这不起作用，请尝试指定更多列大小。

class="col-xl-6 col-lg-6 col-md-6 col-sm-6"

我知道，如果您只指定中等列大小，它可以使元素响应，但更具体地说明您想要在特定像素大小下对布局执行的操作会产生重大影响。

希望这有帮助:)

【讨论】：

【解决方案2】：

正如 Braiden 所说，使用 Bootstrap 库中的 col 类会对您有所帮助。

基本的纲要和布局看起来像这样

<div class="row>
    <div class="col-md-6>Some html in here perhaps a form</div>
    <div class="col-md-6>Some other html in here</div>
</div>

基本上每个行 div 由 12 列组成。 2 col-md-6 将导致父行内 2 个 div 的 50/50 拆分。 col-sm col-md col-lg 等具有不同的尺寸定义特征，因为它与填充和高度等有关。您仍然需要使用上面答案中提供的类似 css 布局创建自己的汉堡菜单（@media）以及字体大小和填充，但总体而言，行列设置应该有助于将移动布局保持在一起

【讨论】：