Html Button提交未完全显示

时间：2017-08-27 16:14:21

标签： html css twitter-bootstrap

我目前正在通过构建一个简单的投资组合来学习bootstrap。但我对如何完全显示提交按钮毫无头绪，除非我将浏览器缩小到90％，并且提交按钮将完全显示。有没有办法在这些问题上取得更好的结果？

enter image description here

示例html：

＆＃13;
＆＃13; 
<style>
		section {
			width: 100vw;
			height: 100vh;
			padding: 50px;
		}

		.cl_white {
			color: white;
		}

		img {
			width: 300px;
			transition: opacity 1s ease-in-out;
		}

		img:hover{
			opacity: .5;
		}
		.col-text{
			-webkit-column-count: 3;
		}

		div.panel-body img {
			transition: opacity .5s ease-in-out;
		}

		div.panel-body img:hover {
			opacity: .5;
		}

	</style>
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	
</head>
<body data-spy="scroll" data-target=".navbar">

	<nav class="navbar navbar-inverse navbar-fixed-bottom">
		<ul class="nav navbar-nav">
			<li><a href="#home">Home</a></li>
			<li><a href="#work">My Work</a></li>
			<li><a href="#about">About</a></li>
			<li><a href="#contact">Contact</a></li>
		</ul>
	</nav>

	<section id="home" style="background: url(images/header.jpg); background-size: 100% 100%;" class="cl_white text-center">
		<h1>My Portfolio</h1>
		<p class="lead"> Let Just read.</p>
		<button class="btn btn-success">Contact Me</button>
	</section>

	<section id="work" class="container">
		<div class="row">
			<div class="page-header">
				<h1 class="text-center">My Work</h1>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12 text-center">
				<img src="images/__portfolio-1.jpg" class="img-thumbnail">
				<img src="images/__portfolio-1.jpg" class="img-thumbnail">
				<img src="images/__portfolio-1.jpg" class="img-thumbnail">
			</div>
		</div>
		<div class="row">
			<div class="col-md-12 text-center">
				<img src="images/__portfolio-1.jpg" class="img-thumbnail">
				<img src="images/__portfolio-1.jpg" class="img-thumbnail">
				<img src="images/__portfolio-1.jpg" class="img-thumbnail">
			</div>
		</div>
	</section>

	<section id="about" class="container">
		<h2 class="text-center">About</h2>
		<div class="col-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div><br>


		<div class="row">
			<div class="col-md-6">
				<div class="panel panel-primary">
					<div class="panel-heading">
						<h4>Web Designing</h4>
					</div>
					<div class="panel-body">
						<img src="images/_www.jpg" class="img-circle center-block">
						<p class="lead text-center">I Do Web Designing.</p>
					</div>
					<div class="panel-footer"></div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="panel panel-primary">
					<div class="panel-heading">
						<h4>Web Designing</h4>
					</div>
					<div class="panel-body">
						<img src="images/_www.jpg" class="img-circle center-block">
						<p class="lead text-center">I Do Web Designing.</p>
					</div>
					<div class="panel-footer"></div>
				</div>
			</div>
		</div>
	</section>
	

	<section id="contact" style="background: silver;">
		<div class="page-header">
			<h2 class="text-center">Contact Me!</h>
		</div>

		<form class="col-md-5 col-md-offset-4">
			<div class="form-group">
				<input class="form-control" placeholder="Insert your Name" type="text">
			</div>
			<div class="form-group">
				<input class="form-control" placeholder="Insert your Email" type="email">
			</div>
			<div class="form-group">
				<input class="form-control" placeholder="Subject" type="text">
			</div>
			<div class="form-group">
				<textarea class="form-control" rows="10">Comments</textarea>
			</div>
			<div class="form-group">
				<input class="btn btn-success btn-block" type="submit">
			</div>
		</form>
	</section>


</body>
</html>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

在提交按钮中添加文字可能会使其正常显示。

尝试更改：

<input class="btn btn-success btn-block" type="submit">

为：

<input class="btn btn-success btn-block" type="submit" value="submit" />

答案 1 :(得分：0)

<section id="contact" style="background: silver;">
     <div class="row">
        <div class="page-header">
            <h2 class="text-center">Contact Me!</h>
        </div>

        <form class="col-md-5 col-md-offset-4">
            <div class="form-group">
                <input class="form-control" placeholder="Insert your Name" type="text">
            </div>
            <div class="form-group">
                <input class="form-control" placeholder="Insert your Email" type="email">
            </div>
            <div class="form-group">
                <input class="form-control" placeholder="Subject" type="text">
            </div>
            <div class="form-group">
                <textarea class="form-control" rows="10">Comments</textarea>
            </div>
            <div class="form-group">
                <input class="btn btn-success btn-block" type="submit">
            </div>
        </form>
</div>
    </section>

在

部分后添加<div class="row">

答案 2 :(得分：0)

最初我通过添加margin-bottom

来实现它 
<section id="contact" style="background: silver; margin-bottom:50px;">

这不是最好的方法，但它有效。

有人可以提供更好的解决方案吗？

答案 3 :(得分：-2)

请尝试在头部添加JQUERY库，看看它是否效果更好

<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
相关问题
最新问题