Question

这是使用Twitter Bootstrap设计一个简单的响应式网页的任务，其中可折叠菜单按钮仅出现在超小型设备上，而且只有大型设备上的品牌名称。我认为我实现了这一目标。

但问题是在我的网页右侧，所有设备（我使用Chrome开发者工具进行测试）的这个恼人的空白区域。

任何建议删除空间，因为它使网页更紧凑，很好看。谢谢提前。我附上了一个白色空间的图像和一个链接到我的代码。

CSS代码，

/*html
{
    overflow-x: hidden;
    overflow-y: scroll;
}*/
body{
    font-family: 'Comfortaa', cursive;
}
/*Header Section*/
#brand-name{
    position: relative;
    bottom:20px;
    left: 1px;
    text-decoration:none;
}
.nav-LLC{
    border-radius: 0px;
}


}
#nav-list{
    margin-top: 10px;
}
#nav-list a {
  text-align: center;
  background-color: #e1e6ed;
  font-size: 1.1em;
  font-weight: bolder;
}
#nav-list a:hover{
    background-color: #96d4e8;
}
/*End of Header Section*/

/* Only for Extra Small Devices*/

@media (max-width: 500px){
    h1{
        font-size: 7vw;
    }
    h2{
        font-size: 7vw;
    }
}

/*Start of Body Section*/ 
h2{
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
    font-color: #0b0821;
}
.row section{

}
.row section p{
    text-align: justify;
    background-color: #e1e6ed;
}
h4{
    position: relative;
    left: 40%;*/
    font-weight: bold;
    color: #0b2730;
    /*background-color: #e1e6ed;
    margin: 0px;*/
}
/*End of Body Section*/

HTML代码，

<header>
    <nav id="nav-LLC" class="navbar navbar-default ">
        <div class="container">
            <div class="navbar-header">
                <div class="navbar-brand">
                    <a  id="brand-name" href="index.html" ><h1> Food,LLC </h1></a>
                </div>

                <div class="button-class">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapsable" aria-expanded="false" >
                    <span class="sr-only"> Toggle Navigation</span>
                    <span class="icon-bar"></span> <!--Icon Bar is three lines in the icon-->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                </div>

            </div><!-- Navbar-header -->
            <section class="visible-xs">
            <div id="nav-collapsable" class="collapse navbar-collapse" >
                <ul id="nav-list"  class="nav navbar-nav navbar-right">
                    <li><a href="#chicken"><span>Chicken</span></a></li>
                    <li><a href="#beef"><span>Beef</span></a></li>
                    <li><a href="#sushi"><span>Sushi</span></a></li>
                    <!--<li><a href="#"><span>Cookies</span><br></a></li>-->
                </ul>
            </div>
            </section>
        </div>
    </nav>
</header>



<div class="container">
<h2>Our Menu</h2>
<div class="row">
<section id="chicken" class="col-md-4 col-sm-6 col-xs-12">
<h4>Chicken</h4>
<p>Do qui nulla et ullamco ut quis excepteur nulla amet. Eiusmod dolore tempor deserunt velit in nulla dolore ut duis dolor. Lorem ipsum duis ea ut occaecat cupidatat sint incididunt laborum ut duis ea cillum excepteur nulla velit ut. Veniam adipisicing proident esse tempor aliquip non nulla laboris esse dolore fugiat nostrud eu nulla consequat ut qui ad. Amet ad sint pariatur aliquip tempor mollit labore minim voluptate fugiat non.<a class="visible-xs" href="#nav-LLC" ><br>Back to top</a></p>
</section>

<section id="beef" class="col-md-4 col-sm-6 col-xs-12">
<h4>Beef</h4>
<p>Do qui nulla et ullamco ut quis excepteur nulla amet. Eiusmod dolore tempor deserunt velit in nulla dolore ut duis dolor. Lorem ipsum duis ea ut occaecat cupidatat sint incididunt laborum ut duis ea cillum excepteur nulla velit ut. Veniam adipisicing proident esse tempor aliquip non nulla laboris esse dolore fugiat nostrud eu nulla consequat ut qui ad. Amet ad sint pariatur aliquip tempor mollit labore minim voluptate fugiat non.<a class="visible-xs" href="#nav-LLC" ><br>Back to top</a></p>
</section>

<section id="sushi" class="col-md-4 col-sm-12 col-xs-12">
<h4>Sushi</h4>
<p>Do qui nulla et ullamco ut quis excepteur nulla amet. Eiusmod dolore tempor deserunt velit in nulla dolore ut duis dolor. Lorem ipsum duis ea ut occaecat cupidatat sint incididunt laborum ut duis ea cillum excepteur nulla velit ut. Veniam adipisicing proident esse tempor aliquip non nulla laboris esse dolore fugiat nostrud eu nulla consequat ut qui ad. Amet ad sint pariatur aliquip tempor mollit labore minim voluptate fugiat non.<a class="visible-xs" href="#nav-LLC" ><br>Back to top</a></p>
</section>

</div>
</div>


<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Link to HTMl and CSS code https://jsfiddle.net/w5v6yr9q/

link to the image https://i.stack.imgur.com/ieRok.png

编辑：非常感谢你们！今天学到了新东西！

Answer 1

您需要知道的是，Web中的HTML元素有默认的CSS值，这些值在开发人员工具中隐藏了一些。 https://www.w3schools.com/cssref/css_default_values

对于您的示例，您需要添加两项内容：首先删除body的默认边距。这将删除视口边缘的白色间隙。

body {
  margin: 0;
}

由于h4，left: 40%向右拉动，以使其灵活居中，并在所有视口中查看以下代码：

h4 {
    position: relative /* remove this */;
    left: 40%; /* remove this */

    text-align: center; /* add this */
}

请记住，对于像.center-headline这样的课程来说，这是一种更好的方法，并在那里添加您需要的样式。然后你只需要复制＆amp;粘贴无后顾之忧。

Answer 2

在CSS中删除此行

CSS

h4{
left:40%;/*remove this*/
}

Answer 3

根据你的jsfiddle，标签下的标签（鸡肉，牛肉，寿司）。你有h4 css与位置相对和“左：40％;”。

为所有h4标签添加一个类（例如“menu-title”）。并给出下面的CSS

.menu-title {
  position: static;
  text-align: center;
}

希望有所帮助

Answer 4

尝试添加这样的Div：

<div class="container">
  <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"><!--  Add this Div-->
    <h2>Our Menu</h2>
    <div class="row">
      <section id="chicken" class="col-md-4 col-sm-6 col-xs-12">
      <h4>Chicken</h4>
      <!-- following codes -->

    </div>
  </div>
</div>

Answer 5

请参阅下面的H4样式：

h4{
    position: relative;
    /* left: 40%;*/ /* this is the issue */
    font-weight: bold;
    color: #0b2730;
  text-align:center; /* if you want to center the text */
    /*background-color: #e1e6ed;
    margin: 0px;*/
}

Answer 6

您可以使用解决方案https://jsfiddle.net/w5v6yr9q/2/

/*html
{
	overflow-x: hidden;
	overflow-y: scroll;
}*/
body{
	font-family: 'Comfortaa', cursive;
}
/*Header Section*/
#brand-name{
	position: relative;
	bottom:20px;
	left: 1px;
	text-decoration:none;
}
.nav-LLC{
	border-radius: 0px;
}


}
#nav-list{
	margin-top: 10px;
}
#nav-list a {
  text-align: center;
  background-color: #e1e6ed;
  font-size: 1.1em;
  font-weight: bolder;
}
#nav-list a:hover{
	background-color: #96d4e8;
}
/*End of Header Section*/

/* Only for Extra Small Devices*/

@media (max-width: 500px){
	h1{
		font-size: 7vw;
	}
	h2{
		font-size: 7vw;
	}
}

/*Start of Body Section*/ 
h2{
	margin-top: 10px;
	margin-bottom: 20px;
	text-align: center;
	font-weight: bold;
	font-color: #0b0821;
}
.row section{
	
}
.row section p{
	text-align: justify;
	background-color: #e1e6ed;
}
h4{
	position: relative;
	font-weight: bold;
	color: #0b2730;
	/*background-color: #e1e6ed;
	margin: 0px;*/
}
/*End of Body Section*/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
	<nav id="nav-LLC" class="navbar navbar-default ">
		<div class="container">
			<div class="navbar-header">
				<div class="navbar-brand">
					<a  id="brand-name" href="index.html" ><h1> Food,LLC </h1></a>
				</div>
					
				<div class="button-class">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapsable" aria-expanded="false" >
					<span class="sr-only"> Toggle Navigation</span>
					<span class="icon-bar"></span> <!--Icon Bar is three lines in the icon-->
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					</button>
				</div>
		
			</div><!-- Navbar-header -->
			<section class="visible-xs">
			<div id="nav-collapsable" class="collapse navbar-collapse" >
				<ul id="nav-list"  class="nav navbar-nav navbar-right">
					<li><a href="#chicken"><span>Chicken</span></a></li>
					<li><a href="#beef"><span>Beef</span></a></li>
					<li><a href="#sushi"><span>Sushi</span></a></li>
					<!--<li><a href="#"><span>Cookies</span><br></a></li>-->
				</ul>
			</div>
			</section>
		</div>
	</nav>
</header>



<div class="container">
<h2>Our Menu</h2>
<div class="row">
<section id="chicken" class="col-md-4 col-sm-6 col-xs-12">
<h4 class="text-center">Chicken</h4>
<p>Do qui nulla et ullamco ut quis excepteur nulla amet. Eiusmod dolore tempor deserunt velit in nulla dolore ut duis dolor. Lorem ipsum duis ea ut occaecat cupidatat sint incididunt laborum ut duis ea cillum excepteur nulla velit ut. Veniam adipisicing proident esse tempor aliquip non nulla laboris esse dolore fugiat nostrud eu nulla consequat ut qui ad. Amet ad sint pariatur aliquip tempor mollit labore minim voluptate fugiat non.<a class="visible-xs" href="#nav-LLC" ><br>Back to top</a></p>
</section>

<section id="beef" class="col-md-4 col-sm-6 col-xs-12">
<h4 class="text-center">Beef</h4>
<p>Do qui nulla et ullamco ut quis excepteur nulla amet. Eiusmod dolore tempor deserunt velit in nulla dolore ut duis dolor. Lorem ipsum duis ea ut occaecat cupidatat sint incididunt laborum ut duis ea cillum excepteur nulla velit ut. Veniam adipisicing proident esse tempor aliquip non nulla laboris esse dolore fugiat nostrud eu nulla consequat ut qui ad. Amet ad sint pariatur aliquip tempor mollit labore minim voluptate fugiat non.<a class="visible-xs" href="#nav-LLC" ><br>Back to top</a></p>
</section>

<section id="sushi" class="col-md-4 col-sm-12 col-xs-12">
<h4 class="text-center">Sushi</h4>
<p>Do qui nulla et ullamco ut quis excepteur nulla amet. Eiusmod dolore tempor deserunt velit in nulla dolore ut duis dolor. Lorem ipsum duis ea ut occaecat cupidatat sint incididunt laborum ut duis ea cillum excepteur nulla velit ut. Veniam adipisicing proident esse tempor aliquip non nulla laboris esse dolore fugiat nostrud eu nulla consequat ut qui ad. Amet ad sint pariatur aliquip tempor mollit labore minim voluptate fugiat non.<a class="visible-xs" href="#nav-LLC" ><br>Back to top</a></p>
</section>

</div>
</div>



<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

从h4

中的CSS移除左：40％;

而是在bootstrap HTML标记中使用h4类文本中心。这是一个干净的方法。

如何删除我页面右侧的空白区域？

6 个答案: