Bootstrap 3页脚内联

时间：2016-07-08 16:38:16

标签： html twitter-bootstrap-3

我正在尝试修复我的页脚。这是我的问题，我打算在左侧放置版权，在右侧放置社交媒体图标。目前，他们正在展示两个不同的路线。我想知道无论如何我可以把它们放在同一条线上吗？

这是我的代码：

 	 <!-- Footer -->
 	 <footer>
 	 <hr>
 	 	<div class="container text-center">
 	 		<div class="page-header text-center">
 	 			<h3>Subscribe for special offer <small>Enter your information</small></h3>
 	 		</div>

 	 		<form action="" class="form-inline" style="text-align: center;">
 	 			<div class="form-group">
 	 			 <label for="name">Name</label>
 	 			 <input type="text" class="form-control" id="name" placeholder="Name" required="required">
 	 			</div> &nbsp;&nbsp;&nbsp;
 	 			<div class="form-group">
 	 				<label for="email">Email</label>
 	 				<input type="email" class="form-control" id="email" placeholder="Email" required="required">
 	 			</div> &nbsp;&nbsp;&nbsp;
 	 			<div class="form-group">
 	 				<label for="phone_no">Phone Number (Type only the numbers)</label>
 	 				<input type="text" name="num" data-validation="number" 
    data-validation-allowing="negative,number" input name="color" 
    data-validation="number" datavalidation-ignore="$" required="required" class="form-control" 
    id="phone_no" placeholder="Phone Number" maxlength="10" pattern="\d*">
 	 				<!--<input type="tel" id="phone_no" pattern="^\d{3}-\d{3}-\d{4}$" required="required">-->
 	 			</div> &nbsp;&nbsp;&nbsp;
 	 			<button type="submit" class="btn btn-default">Subscribe</button>
 	 			<hr>
 	 		</form> <!--End form-->

 	 		<hr>
 	 		<div class="copyright" style="text-align: left;">
 	 			<p>&copy; Copyright @ 2016</p>
 	 		</div>
 	 		<div class="social media" style="text-align: right;">
 	 		<ul class="list-inline">
 	 			<li><a href="http://www.facebook.com"><i class="fa fa-facebook-square fa-3x"></i></a></li>
 	 			<li><a href="http://www.twitter.com"><i class="fa fa-twitter-square fa-3x"></i></a></li>
 	 			<li><a href="http://www.instagram.com"><i class="fa fa-instagram fa-3x"></i></a></li>
 	 		</ul>
 	 		</div>

 	 	</div> <!--End Container-->

 	</footer>




 	<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
	<script>
	$(function() {
    	$('a.page-scroll').bind('click', function(e) {
        	var $anchor = $(this);
        	
        	$('html, body').stop().animate({
            	scrollTop: $($anchor.attr('href')).offset().top
        	}, 1500, 'easeInOutExpo') //add/remove for smooth scroll;
        	e.preventDefault();
    	});
	});
	</script>
	<script src="https://use.fontawesome.com/5a33902e83.js"></script>
 </body>
</html>

2 个答案:

答案 0 :(得分：1)

试试这个

<!-- Footer -->
 <footer>
  <hr>
   <div class="container text-center">
     <h3>Subscribe for special offer <small>Enter your information</small></h3>
   </div>

   <form action="" class="form-inline">
     <div class="form-group">
       <label for="name">Name</label>
        <input type="text" class="form-control" id="name" placeholder="Name" required="required">
     </div> &nbsp;&nbsp;&nbsp;
     <div class="form-group">
      <label for="email">Email</label>
        <input type="email" class="form-control" id="email" placeholder="Email" required="required">
     </div> &nbsp;&nbsp;&nbsp;
     <div class="form-group">
      <label for="phone_no">Phone Number (format: XXXXXXXXXX)</label>
        <input type="text" name="num" data-validation="number" 
    data-validation-allowing="negative,number" input name="color" 
    data-validation="number" datavalidation-ignore="$" required="required" class="form-control" 
    id="phone_no" placeholder="Phone Number" maxlength="10" pattern="\d*">
                    <!--<input type="tel" id="phone_no" pattern="^\d{3}-\d{3}-\d{4}$" required="required">-->

     </div> &nbsp;&nbsp;&nbsp;
     <button type="submit" class="btn btn-default">Subscribe</button>
     <hr>
    </form> <!--End form-->

  <div class="row">
    <div class="copyright">
       <p class="navbar-text pull-left">&copy; Copyright @ 2016</p>
    </div>
    <div class="pull-right">
      <a href="https://www.facebook.com/bootsnipp"><i class="fa fa-facebook-square fa-3x social"></i></a>
      <a href="https://twitter.com/bootsnipp"><i class="fa fa-twitter-square fa-3x social"></i></a>
      <a href="https://plus.google.com/+Bootsnipp-page"><i class="fa fa-google-plus-square fa-3x social"></i></a>
      <a href="mailto:bootsnipp@gmail.com"><i class="fa fa-envelope-square fa-3x social"></i></a>
    </div>
  </div> <!--End row-->

   </div> <!--End Container-->

</footer>

JSFiddle：https://jsfiddle.net/iamrico/ng6xrsq5/

答案 1 :(得分：0)

更改facebook的宽度

 	 <!-- Footer -->
 	 <footer>
 	 <hr>
 	 	<div class="container text-center">
 	 		<div class="page-header text-center">
 	 			<h3>Subscribe for special offer <small>Enter your information</small></h3>
 	 		</div>

 	 		<form action="" class="form-inline" style="text-align: center;">
 	 			<div class="form-group">
 	 			 <label for="name">Name</label>
 	 			 <input type="text" class="form-control" id="name" placeholder="Name" required="required">
 	 			</div> &nbsp;&nbsp;&nbsp;
 	 			<div class="form-group">
 	 				<label for="email">Email</label>
 	 				<input type="email" class="form-control" id="email" placeholder="Email" required="required">
 	 			</div> &nbsp;&nbsp;&nbsp;
 	 			<div class="form-group">
 	 				<label for="phone_no">Phone Number (Type only the numbers)</label>
 	 				<input type="text" name="num" data-validation="number" 
    data-validation-allowing="negative,number" input name="color" 
    data-validation="number" datavalidation-ignore="$" required="required" class="form-control" 
    id="phone_no" placeholder="Phone Number" maxlength="10" pattern="\d*">
 	 				<!--<input type="tel" id="phone_no" pattern="^\d{3}-\d{3}-\d{4}$" required="required">-->
 	 			</div> &nbsp;&nbsp;&nbsp;
 	 			<button type="submit" class="btn btn-default">Subscribe</button>
 	 			<hr>
 	 		</form> <!--End form-->

 	 		<hr>
 	 		<div class="copyright" style="float: left;">
 	 			<p>&copy; Copyright @ 2016</p>
 	 		</div>
 	 		<div class="social media" style="float: right;">
 	 		<ul class="list-inline">
 	 			<li><a href="http://www.facebook.com"><i class="fa fa-facebook-square fa-3x"></i></a></li>
 	 			<li><a href="http://www.twitter.com"><i class="fa fa-twitter-square fa-3x"></i></a></li>
 	 			<li><a href="http://www.instagram.com"><i class="fa fa-instagram fa-3x"></i></a></li>
 	 		</ul>
 	 		</div>

 	 	</div> <!--End Container-->

 	</footer>




 	<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
	<script>
	$(function() {
    	$('a.page-scroll').bind('click', function(e) {
        	var $anchor = $(this);
        	
        	$('html, body').stop().animate({
            	scrollTop: $($anchor.attr('href')).offset().top
        	}, 1500, 'easeInOutExpo') //add/remove for smooth scroll;
        	e.preventDefault();
    	});
	});
	</script>
	<script src="https://use.fontawesome.com/5a33902e83.js"></script>
 </body>
</html>

相关问题
最新问题