如何删除Bootstrap行之间的空间

时间：2016-05-26 16:17:43

标签： html css twitter-bootstrap

出于某种原因，我的两个引导行之间有一个间隙，我认为它可能与某个地方的引导填充有关，但我找不到任何可能推动第二行降低的东西。这是Screenshot发生的事情。我想要将第二行中的图像向上推，使其位于第一行（图像中突出显示的行）下方。任何帮助表示赞赏！

＆＃13;
＆＃13; 
/*style sheet*/


#Backg
{
background-image: url("Graphics/ravenna.png");
background-repeat: repeat;
height: 100%;
}



#PrimaryC {
padding: 10px;
background-image: url("Graphics/paper_fibers.png");
background-repeat: repeat;
height: 100%;
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
}

#Header
{
height: 100px;
width: 100%;
background-image: url("Graphics/SiteLogo.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}  


.caption a
{
text-decoration: none;
color: black;
}

.caption a:hover
{
text-decoration: none;
color: black;

}

.caption a:visited
{
text-decoration: none;
color: black;

}

.caption a:active
{
text-decoration: none;
color: black;

}

.form-group
{
padding: 10px;
}




.Content 
{
width: 100%;
height: 500px;
background-color: white;
resize: both;
border-radius: 0px 25px 25px 25px;
border: 1px solid white;

}

#HeaderText /
{
font-family:'Rokkitt', serif;
font-size: 35px;
color: black;
text-decoration: underline;
padding-right: 20px;
}

#RegularText 
{


font-family:'Rokkitt', serif;
font-size: 18px;
padding-right: 20px;
}

.dropcap
{ 
float: left;
color: #903;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia; 
}


#Arcade 
{
width: 100%;

}

.post-content
{
font-family:'Didact Gothic', sans-serif;
font-size: 150%; 
top: 120px;
left:15px;
position: relative;
letter-spacing: 2px;

}

#RightRow
{
Position: relative;

}


.top-buffer 
{ margin-top:20px; 
}


.centerBlock
{
position: relative;
top: -200px;
padding-left: 10px;
margin:0 auto;
}



.Slot
{
display: inline-block;
margin-left: 10px;
right: 5px;
}



#slideshow
{
margin:auto;
}


.col-md-12 
{
position: relative;

}


.bigicon  
{
font-size: 35px;
color: #4D7549;
padding: 10px;
}

.header
{
font-family:'Rokkitt', serif;
font-size: 35px;
text-decoration: underline;

}


.footer-basic-centered
{
background-color: #683025;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: center;
font: normal 18px sans-serif;
box-shadow: 0 5px 5px -5px black;
padding: 15px;
margin-top: 25px;
}

.footer-basic-centered .footer-company-motto
{
color:  white;
font-size: 24px;
margin: 0;
font-family:'Rokkitt', serif; 
}

.footer-basic-centered .footer-company-name
{
color:  #8f9296;
font-size: 14px;
margin: 0;
}

.footer-basic-centered .footer-links
{
list-style: none;
font-weight: bold;
color:  #ffffff;
padding: 35px 0 23px;
margin: 0;
font-family: 'Didact Gothic', sans-serif;
}

.footer-basic-centered .footer-links a
{
display:inline-block;
text-decoration: none;
color: inherit;
}



@media (max-width: 600px) {

	.footer-basic-centered{
		padding: 35px;
	}

	.footer-basic-centered .footer-company-motto{
		font-size: 18px;
	}

	.footer-basic-centered .footer-company-name{
		font-size: 12px;
	}

	.footer-basic-centered .footer-links{
		font-size: 14px;
		padding: 25px 0 20px;
	}

	.footer-basic-centered .footer-links a{
		line-height: 1.8;
	}
}



thead 
{
 display:block;
 margin:0px;
 cell-spacing:0px;
 left:0px;
}

tbody 
{ display:block;
 overflow:auto;
 height:300px; 
}

 th
 { height:50px;
 width:100%;
}


td 
{ height:30px;
 width:100%;
 margin:0px;
 cell-spacing:0px;
}



/*Desktop*/
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 22px;
position: relative;
top: -360px;
}



/*Tablet Devices*/
@media (min-width: 768px) and (max-width: 969px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 18px;
position: relative;
top: -270px;
font-size: 50%;


}
}
/*Mobile Devices*/
@media(max-width: 767px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 18px;
position: relative;
font-size: 20%;
top: auto;
} 
.post-content
{
top: 20px;
font-size: 80px;
}
.Content
{
height: 600px;
}
}

/*1200*/
@media (min-width: 970px) and (max-width: 1119px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 25px;
position: relative;
top: -310px;
font-size: 60%;
}}
}
＆＃13; 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
   
    <link rel="stylesheet" href="Styles.css" /> 		<!--Main Style Sheet-->
    <link rel="stylesheet" href="bootstrap.min.css" />  <!--Bootstrap Style Sheet-->
	<link rel="stylesheet" href="animate.css" />		<!--Animate Style Sheet-->
	<link rel="stylesheet" href="hover.css" />			<!--Hover animation Style Sheet-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">	<!--Font Awesome Style Sheet-->

    <link href='https://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css' />			<!--Rokkitt Google Font-->
    <link href='https://fonts.googleapis.com/css?family=Didact+Gothic' rel='stylesheet' type='text/css' />		<!--Gothic Google Font-->

	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>			<!--BootStrap JS-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>					<!--JQuery JS-->
	<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>					<!--JQuery Cycle Plug-in-->
		
	<!--Image Fade Script-->
	<script type="text/javascript"> 
	$(document).ready(function() {
		$('.Slot').cycle({
			fx: 'fade' 
		});
	});
	</script>
	<title>Retro Games Arcade</title>
  </head>
  
  <body>
    <div id="Backg">
      <div id="PrimaryC" class="container">   																	<!--Primary Container-->
        <div id="Header">					  																	<!--Site Logo-->
        </div>
        <div class="Content">				 																	<!--Main Content Container-->
          <div class="row">																						<!--Row 1-->
            <div class="col-sm-6">																				<!--Left Col-->             
              <img src="Graphics/Arcade.png" id="Arcade" class="hidden-xs" />
              <div class="caption post-content">
                <div id="Home"><a href="Home.htm" class="hvr-push">home</a></div>								<!--Home Button-->                
                <div id="Stock"><a href="Stock.htm" class="hvr-push">stock</a></div>							<!--Stock Button-->               
                <div id="AboutUs"><a href="AboutUs.htm" class="hvr-push">about us</a></div>						<!--About Us Button-->                
                <div id="ContactUs"><a href="ContactUs.htm" class="hvr-push" >contact us</a></div>				<!--Contact Us Button-->               
              </div>
			  
			  
			  <div id="slideshow" class="centerBlock hidden-xs hidden-sm hidden-md">			  				<!--Image Slide Show-->
				  <div class="Slot">
				  <img class="img-responsive" src="Graphics/IMG1.png" width="158" height="162">
				  <img class="img-responsive" src="Graphics/L1.png" width="158" height="162">
				  </div>
				  
				  <div class="Slot">
				  <img class="img-responsive" src="Graphics/IMG2.png" width="158" height="162">
				  <img class="img-responsive" src="Graphics/L2.png" width="158" height="162">
				  </div>
				  
				  <div class="Slot">
				  <img class="img-responsive" src="Graphics/IMG3.png" width="158" height="162">
				  <img class="img-responsive" src="Graphics/L3.png" width="158" height="162">
				  </div>
				</div>			  			 
			</div>
			
            <div class="col-sm-6 form-group" id="RightRow">  																	<!--Form-->
				<legend class="text-center header">Contact us</legend>
				     <div class="form-group">
                         <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
							<div class="col-md-8">
								<input id="fname" name="name" type="text" placeholder="First Name" class="form-control">		<!--First Name Field-->
							</div>	
					</div>
			
		             <div class="form-group">
                         <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>			<!--Last Name Field-->
                            <div class="col-md-8">
                                <input id="lname" name="name" type="text" placeholder="Last Name" class="form-control">
                            </div>
                     </div>

                     <div class="form-group">
                         <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-envelope-o bigicon"></i></span>		<!--Email Address Field-->
                            <div class="col-md-8">
                                <input id="email" name="email" type="text" placeholder="Email Address" class="form-control">
                            </div>
                     </div>

                     <div class="form-group">
                         <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-phone-square bigicon"></i></span>	<!--Phone Number Field-->
                            <div class="col-md-8">
                                <input id="phone" name="phone" type="text" placeholder="Phone Number" class="form-control">
                            </div>
                     </div>

                     <div class="form-group">
                         <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-pencil-square-o bigicon"></i></span>	<!--Message Field-->
                            <div class="col-md-8">
                                <textarea class="form-control" id="message" name="message" placeholder="Enter your message here and a member of our team will respond as quickly as possible." rows="7"></textarea>
                            </div>
                     </div>

                     <div class="form-group">
                         <div class="col-md-12 text-center">
							</br>
                                <button type="submit" class="btn btn-primary btn-lg">Submit</button>								<!--Submit Button-->
                         </div>
                     </div>
			</div>
		</div>
						
						
		<div class="row" id="stuff">																								<!--Row 3-->
          <div class="col-md-12">
            <img src="Graphics/Aracde3.png" id="Vector" class="img-responsive center-block" class="hidden-xs" />
          </div>      	 
		</div>		  
		</div>
	</div>
	<footer class="footer-basic-centered">
		<p class="footer-company-motto">Expand Your Retro Playground.</p>
        <p class="footer-links">
        <a href="Home.htm">Home</a> · 
        <a href="Stock.htm">Stock</a> · 
        <a href="AboutUs.htm">About Us</a> · 
        <a href="ContactUs.htm">Contact Us</a></p>
        <p class="footer-company-name">Retro Games Arcade &copy; 2016</p>
    </footer>
	
  </body>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：5)

Bootstrap＆＃34; object NullHypothesis extends Enumeration { type NullHypothesis = Value val OneSampleTwoSided = Value("Sample follows theoretical distribution") } 班有Very strong presumption against null hypothesis: Sample follows theoretical distribution. ________________________________________ H0 ，请参阅源代码here

所以可能你必须用.row覆盖或者创建一个像

这样的辅助类 
margin

答案 1 :(得分：0)

如上所述，请确保该行底部没有边距，您可以使用以下方式将其删除：

.class {
margin-bottom: 0;
}

还要查看第二行是否有顶部边距或填充。所有这些都将在行之间留下“空间”。

答案 2 :(得分：0)

如果您仍然遇到问题，我相信这与您的.Backg或.PrimaryC类有关。

它们的“高度”属性均设置为100％。

您是否尝试过删除/更改此height属性？看来您的“ .Content” div是正确的高度，但是父容器更大。

答案 3 :(得分：0)

getbootstrap.com: How To Do Line Spacing in Bootstrap

如果要使用引导程序来控制行距，建议使用引导程序中的边距和填充设置。即my-0和py-0。

m是保证金

p用于填充

y是顶部和底部

0是间距量

相关问题
最新问题