Question

当我缩小我的网站或在移动设备/平板电脑上查看时，右侧有所有这些边距/空白，它会切断#main部分中的文本内容。为什么会发生这种情况？如何正确地进行调整呢？我已经尝试过隐藏在各个部分上的溢出，这些部分没有解决任何问题，我已经尝试将边距归零并弄乱填充。我不确定如何使其正确缩放并摆脱右边的额外边距/空间。还有很多，只有header，nav和#main部分。感谢您的帮助

HTML：

<body>    
<header id="main-header">
    <div class="container">
        <h1 class="display-4">.Richardson</h1>
    </div>
</header>

    <nav id="navbar">
        <div class="container">
            <ul class="my-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>


<section id="main">
    <div class="container">
       <div class="col-md-8" id="welcome-text">

        <h1 class="display-4">Welcome</h1>
        <hr class="rule">
        <p><cite>"Discipline is the bridge between goals and accomplishments" ~ Jim Rohn</cite></p>
                <p>Hey, I'm <span style="font-size: 24px; color: #FFFC31"><strong>Name!</strong></span> Congratulations on joining me in my path to becoming a highly valued, self-taught <span style="font-size: 24px; color:#FFFC31"><strong>Front-End Web Developer</strong></span>. My journey began with <span style="font-size: 24px; color: #FFFC31"><strong>Free Code Camp</strong></span> and the <span style="font-size: 24px; color: #FFFC31"><strong>Code Academy,</strong></span> as well as many youtube tutorials. I've learned <span style="font-size: 24px; color: #FFFC31"><strong>HTML, CSS and Javascript</strong></span> basics thus far. I aspire to put my coding skills to use by adding value and making a difference. Continually challenging myself and improving my craft. <span style="font-size: 24px; color: #FFFC31"><strong>I'm passionate</strong></span> about Nature, animals, traveling, serving the community, maintaining a healthy mind, body and spirit, and enjoying great food and craft beer with great people.</p>
        </div>
    </div>
</section> 

   <section>
       <h1>Portfolio</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?</p>

       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?</p>

       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?</p>
   </section>

css:
    * {
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin:auto;
    overflow: hidden;
}

img {
    min-width: 100%;
    margin: 0;
}

h1,h2,h3,h4,h5,h6 {
    font-family: "Helvetica", "geneva", sans-serif;
}

p {
    font-family: sans-serif;
    font-size: 1.3rem;
    line-height: 2.5rem;
}

a {
    color: #4e0250;
}

a:hover {

    text-decoration: none;
    background-color: gray;
    padding: 10px;
    color: #D3D3D3;
    border-radius: 20px;
}

#main-header {
    background: #4E0250;
    color: silver;
    text-align: center;
    position: sticky;
    top: 0;
    right: 0;
    z-index: 1;
}

#navbar {
    text-align: center;
    background-color: #D3D3D3;
    color: #4e0250;
    font-size: 1.4rem;
    z-index: 1;
}

#navbar ul {
    padding-left: 65px;
}

#navbar ul li {
    text-align: center;
    list-style: none;
    padding-right: 40px;
    display: inline;
}

#navbar {
    position: fixed;
    width: 100%;
}

#navbar .my-nav {
    margin: 15px;
}

#main {
    padding-top: 5rem;
    background: url('../img/headon3.jpg') center center no-repeat;
    background-size: cover;
    min-height: 757px; 
    overflow: hidden;
}

#main .container {
    margin-top: 55px;
    margin-left: 150px;

}

#main #welcome-text {
    background-color: rgba(92, 92, 92, 0.9);
    color: #D3D3D3;
    padding: 0 20px;
    border-radius: 10%;
    padding-bottom: 5px;
    min-width: 40%;
}

#main h1 {
    padding-top: 20px;
}

.rule {
    border-top: 1px solid floralwhite;
    padding-bottom: 10px;
}

Answer 1

你的主要问题是你不是让bootstrap正确处理行和列的边距填充。为了解决这个直接问题，你有两个问题：

首先，

http://getbootstrap.com/docs/3.3/css/#grid-media-queries

#main .container {
    margin-top: 55px;
    margin-left: 150px;
}

妨碍了。让.container类自己处理。它使用媒体查询来精确定义不同宽度的边距。你在这里所做的就是硬编码，它始终是150px，而且是大多数屏幕的iphone。

其次，

http://getbootstrap.com/docs/3.3/css/#grid

Container > rows > columns.

您在这里缺少一个行类：

<div class="container">
  <div class="row">
    <div class="col-md-8" id="welcome-text">

网站没有正确扩展

1 个答案: