我正在使用Bootstrap的网格将我的页面设置为移动友好。我最近遇到了从一个盒子到另一个盒子的重大溢出问题，但是当我应用“display：inline”时能够看到修复消失了。到#mainbody。现在唯一的问题是我的列在完全窗口时垂直显示而不是水平显示。下面是HTML，CSS和屏幕截图。感谢任何帮助。
申请内联后<!DOCTYPE html>
{% load staticfiles %}
{% load embed_video_tags %}
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8" />
<meta http-equiv="content-type" content='text/html; charset=utf=8'/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://fonts.googleapis.com/css?family=Rubik+Mono+One" rel="stylesheet">
<meta name='viewport' content='width=device-width, initial-scale=1'/>
<script type="text/javascript" src="{{ STATIC_URL }} /static/personal/jquery/jquery.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }} /static/personal/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }} /static/personal/jquery/rango.js"></script>
<link rel="stylesheet" href="{% static 'personal/css/fonts.css' %}" type = "text/css"/>
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
</head>
<!-- main body -->
<div class='wrapper'>
<body background = "{% static 'personal/img/background3.jpg' %}">
<div class='container-fluid'>
<div >
<div class="row" id="header" style = 'background-image: "{% static 'personal/img/divbackground.jpg' %}";'>
<div class="col-sm"></div>
</div>
<div class="row" id="title">
<div class="col"><img src='{% static 'personal/img/aboutme.png' %}' style="height: 100%; width: 100%; max-width: 530px; max-height: 1000px;"></div>
</div>
<div class="row" id="mainbody">
<div class="col-sm"><p>Maecenas quis est at purus maximus auctor. Maecenas varius tortor quis diam varius, eu ornare mauris mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla iaculis, ipsum quis tincidunt rutrum, nisi sem posuere nunc, in rhoncus massa ipsum consectetur risus. Curabitur at dolor non enim varius condimentum. Vestibulum lobortis sed tortor ac mattis.
</p>
</div>
<div class="col-sm"><p id="bodytext">Maecenas quis est at purus maximus auctor. Maecenas varius tortor quis diam varius, eu ornare mauris mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla iaculis, ipsum quis tincidunt rutrum, nisi sem posuere nunc, in rhoncus massa ipsum consectetur risus. Curabitur at dolor non enim varius condimentum. Vestibulum lobortis sed tortor ac mattis.
</p></div>
<div class="col-sm"><p>Maecenas quis est at purus maximus auctor. Maecenas varius tortor quis diam varius, eu ornare mauris mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla iaculis, ipsum quis tincidunt rutrum, nisi sem posuere nunc, in rhoncus massa ipsum consectetur risus. Curabitur at dolor non enim varius condimentum. Vestibulum lobortis sed tortor ac mattis.
</p></div>
</div>
<div class="row" id="title">
<div class="col"><img src='{% static 'personal/img/influencers.png' %}' style="height: 100%; width: 100%; max-width: 530px; max-height: 1000px;"></div>
</div>
<div class="row" id="mainbody">
<div class="col-sm-12 col-md-12 col-lg-12" id="imagelist">
<center>
<link rel="stylesheet" href="{% static 'personal/css/influencersimages.css' %}" type = "text/css"/>
<a href = '/joerogan/'><img src="{% static 'personal/img/JoeRogansmall.jpg' %}" class="img" id="Joe Rogan">
<a href = '/seneca/'><img src="{% static 'personal/img/Senecasmall.jpg' %}" class="img" id="Seneca">
<a href = '/peterthiel/'><img src="{% static 'personal/img/peterthielsmall.jpg' %}" class="img" id="Peter Thiel">
<a href = '/timferris/'><img src="{% static 'personal/img/TimFerrissmall.jpg' %}" class="img" id="Tim Ferris">
<a href = '/markcuban/'><img src="{% static 'personal/img/MarkCubansmall.jpg' %}" class="img" id="Mark Cuban"></a>
<button onclick ='showDiv()'> <img src="{% static 'personal/img/Jockosmall.jpg' %}" class="img" id="jocko" > </button>
</center>
</div>
</div>
<div id="welcomeDiv" style="display:none; margin: 0; border: 2px white solid;" class="answer_list">
<div class="row" id="mainbody">
<div class="col-sm-6 col-md-6 col-lg-6"><img src="{% static 'personal/img/Jocko.jpg' %}" class='influencersimage'>
</div>
<div class="col-sm-6 col-md-6 col-lg-6"><p>Maecenas quis est at purus maximus auctor. Maecenas varius tortor quis diam varius, eu ornare mauris mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla iaculis, ipsum quis tincidunt rutrum, nisi sem posuere nunc, in rhoncus massa ipsum consectetur risus. Curabitur at dolor non enim varius condimentum. Vestibulum lobortis sed tortor ac mattis.
</p></div>
</div>
</div>
<div class="row" id="title">
<div class="col"><img src='{% static 'personal/img/bucketlist.png' %}' style="height: 100%; width: 100%; max-width: 530px; max-height: 1000px;"></div>
</div>
<div class="col" id="mainbody">
<ol class="olcenter">
<b>
<li class='bucket'>example</li>
<li class='bucket'>example</li>
<li class='bucket'>example</li>
<li class='bucket'>example</li>
<li class='bucket'>example</li>
</ol>
</div>
</div>
<div class="row" id="title">
<div class="col"><img src='{% static 'personal/img/contactme.png' %}' style="height: 100%; width: 100%; max-width: 530px; max-height: 1000px;"></div>
</div>
<div class="row" id="mainbody">
<div class="col-sm-4"><p>Maecenas quis est at purus maximus auctor. Maecenas varius tortor quis diam varius, eu ornare mauris mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</p>
</div>
<div class="col-sm-4"><p id="bodytext">Maecenas quis est at purus maximus auctor. Maecenas varius tortor quis diam varius, eu ornare mauris mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</p></div>
<div class="col-sm-4"><p>Maecenas quis est at purus maximus auctor. Maecenas varius tortor quis diam varius, eu ornare mauris mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</p></div>
</div>
{% block content %}
{% endblock %}
</body>
</div>
</html>
body {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.wrapper {
width:100%;
}
#mainbody {
background: white;
height: 200px;
margin: auto;
color: white;
min-height: 100%;
display: inline;
background: transparent;
background-repeat: no-repeat;
background-attachment: fixed;
background: transparent;
}
#header {
height: 100px;
margin: auto;
}
#title {
background:white;
height: 125px;
margin: auto;
background-image:
url('');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background: transparent;
height: 80%;
}
#welcomeDiv {
display: inline-block;
max-width: 100%;
max-height: 100%;
width: 800px;
height: 400px;
margin: auto 0;
}