Question

我正在第一个“手工制作”（即不是WordPress）网站上工作。使用Django / Python和Bootstrap 4进行构建。即使我在合同中写道，我没有义务使站点移动友好，但是客户端却要求它可以在移动设备上运行（客户端...无礼吗？）。

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

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

所以...我觉得在（1）使顶部导航栏在某个断点处切换到移动样式导航栏和（2）对其进行编程以保留顶部的填充之间，有一个解决方案。 main 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 %}

Answer 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"

我了解，如果您仅指定中等的列大小，则可以使元素具有响应性，但是更具体地说明您希望以特定像素大小对布局进行的操作，会带来很大的不同。

希望这有帮助：）

Answer 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）以及字体大小和内边距，但总体而言，行列设置应有助于将所有内容保持在移动布局范围内

Bootstrap：有没有相对简单的方法可以使我的页面在移动设备上正常工作？

2 个答案: