我正在使用产品登陆页面作为freecodecamp bootcamp的一部分。我正在使用bootstrap库。
我无法将电子邮件输入置于表单中心。我尝试使用12列修复问题，但它非常大。我希望它占据6列的空间，但也将它对齐在中心。
<style>
* {
margin: 0;
padding: 0;
}
body {
}
main {
max-width: 1000px;
width: 100%;
margin: 0 auto;
text-align: center;
align-items: center;
}
#hero {
background-color: #FFF;
}
#video {
margin-top: 50px;
}
h1{
margin: 20px;
}
section{
margin: 50px;
} <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body>
<header id="header">
<nav id="nav-bar" class="navbar navbar-dark navbar-expand-lg fixed-top bg-dark">
<a class="navbar-brand" href="#">
<img src="https://png.icons8.com/nolan/50/000000/bank-building.png" id="header-img" width="30" height="30" class="d-inline-block align-top" alt="">
OmegaStocks
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#hero">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="container">
<section id="hero" class="jumbotron text-center">
<h1 class="jumbotron-heading">Subscribe to our weekly newsletter</h1>
<div class="container">
<form class="" action="https://www.freecodecamp.com/email-submit" id="form">
<div class="form-group">
<input id="email" type="email" name="email" value="" class="form-control col-sm-6" placeholder="Enter your email address" required/>
</div>
<input type="submit" name="" value="Submit" id="submit" class="btn btn-primary btn-lg">
</form>
</div>
</section>
<section id="features">
<h1>features</h1>
<div class="container marketing">
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
<img class="rounded-circle" src="https://png.icons8.com/nolan/96/000000/coins.png" alt="Generic placeholder image" width="140" height="140">
<h2>Best in class</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" src="https://png.icons8.com/nolan/96/000000/money-box.png" alt="Generic placeholder image" width="140" height="140">
<h2>Effective</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" src="https://png.icons8.com/nolan/96/000000/bitcoin.png" alt="Generic placeholder image" width="140" height="140">
<h2>Accurate</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<div class="container">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/pXRviuL6vMY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</iframe>
</div>
</section>
<section id="pricing">
<h1>pricing</h1>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Free</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>10 users included</li>
<li>2 GB of storage</li>
<li>Email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Pro</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>20 users included</li>
<li>10 GB of storage</li>
<li>Priority email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Enterprise</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>30 users included</li>
<li>15 GB of storage</li>
<li>Phone and email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
</div>
</div>
</div>
</section>
</main>
<footer class="container py-5">
<div class="row">
<div class="col-12 col-md">
<img src="https://png.icons8.com/nolan/50/000000/bank-building.png" alt="">
<small class="d-block mb-3 text-muted">© 2018</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Cool stuff</a></li>
<li><a class="text-muted" href="#">Random feature</a></li>
<li><a class="text-muted" href="#">Team feature</a></li>
<li><a class="text-muted" href="#">Stuff for developers</a></li>
<li><a class="text-muted" href="#">Another one</a></li>
<li><a class="text-muted" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Business</a></li>
<li><a class="text-muted" href="#">Education</a></li>
<li><a class="text-muted" href="#">Government</a></li>
<li><a class="text-muted" href="#">Gaming</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Team</a></li>
<li><a class="text-muted" href="#">Locations</a></li>
<li><a class="text-muted" href="#">Privacy</a></li>
<li><a class="text-muted" href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
答案 0 :(得分：1)
只需将您的#email元素设置为使用自动保证金。
#email {
margin:auto;
}
答案 1 :(得分：1)
您可以使用offset-sm-3将输入元素居中。
<input id="email" type="email" name="email" value="" class="form-control col-sm-6 offset-sm-3" placeholder="Enter your email address" required/>
答案 2 :(得分：1)
我已解决您的问题，请检查以下代码'section id =“hero”'
<section id="hero" class="jumbotron text-center">
<h1 class="jumbotron-heading">Subscribe to our weekly newsletter</h1>
<div class="container">
<div class="row">
<div class="col-sm-6 offset-sm-3">
<form class="" action="https://www.freecodecamp.com/email-submit" id="form">
<div class="form-group">
<input id="email" type="email" name="email" value="" class="form-control" placeholder="Enter your email address" required/>
</div>
<input type="submit" name="" value="Submit" id="submit" class="btn btn-primary btn-lg">
</form>
</div>
</div>
</div>
</section>
答案 3 :(得分：0)
如果要使表单居中，可以创建包含三列的行。两列，其中3作为6值列每一侧的值。
有时候这些列对你不利，这只是一个对我有用的简单修复。