将按钮对齐到窗体的右下角
我使用带有联系表单的Bootstrap 4创建了一个简单的页面，并希望按钮与其右下角对齐，而不是底部中间。我怎么能做到这一点？
以下是表单的HTML：
<div class="row">
<div class="col center-block">
<div class="contact">
<h2>Contact</h2>
<form action="mailto:nataliecardot@gmail.com" method="post" enctype="text/plain">
<div class="form-group">
<input type="text" class="form-control" id="contact-name" placeholder="Name" required>
</div>
<div class="form-group">
<input type="email" class="form-control" id="contact-email" aria-describedby="emailinfo" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="contact-message" placeholder="Your message" required>
</div>
<button type="submit" class="btn btn-dark">Send</button>
</form>
</div>
</div>
</div>
CSS应用于按钮和表单元素：
.form-control {
width: 50%;
margin: 0 auto;
border-bottom: 1px solid #888;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-radius: 0;
padding: 10px 0px;
}
input[type=text], input[type=email] {
background-color: WhiteSmoke;
}
button {
margin-top: 1em;
margin-bottom: 2em;
}
完整代码视图CodePen。
6 个答案:
答案 0 :(得分：1)
将此代码用于按钮：
<div class="bt-btn">
<button type="submit" class="btn btn-dark">Send</button>
</div>
<强> CSS：
.bt-btn {
margin: 0 auto;
text-align: right;
width: 50%;
}
答案 1 :(得分：0)
你可以做类似的事情。
button {
margin-right: 25%;
float : right;
}
工作示例：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-family: "Playfair Display", serif;
padding-top: 0.5em;
}
h2, h5 {
text-transform: uppercase;
/* Padding used instead of margins because whereas margins add space beyond element's box and therefore won't be colored, the inverse is true for padding */
padding: 0.5em 0;
margin: 0;
}
.about p {
padding: 0 4em 2em 4em;
margin: 0;
text-align: left;
}
.nav-link {
text-transform: uppercase;
color: white;
}
.nav-link:hover {
color: white;
}
.hero-image {
background-image: url(https://image.ibb.co/jEN7CS/workspace.jpg);
/* Set a specific height */
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
/* Resizes background image to fill entire container */
background-size: cover;
position: relative;
}
.about {
background-color: WhiteSmoke;
}
.portfolio {
background-color: LightGrey;
}
.contact {
background-color: WhiteSmoke;
}
/* Removes white space from sides of each column */
.col {
padding: 0;
}
.footer {
position: bottom;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 0.75rem;
background-color: grey;
}
.footer-tag {
color: white;
text-align: left;
padding: 15px;
}
.fab {
float: right;
padding: 10px;
color: white;
}
.fab:hover {
color: #4d4d4d;
}
.form-control {
width: 50%;
margin: 0 auto;
border-bottom: 1px solid #888;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-radius: 0;
padding: 10px 0px;
}
input[type=text], input[type=email] {
background-color: WhiteSmoke;
}
button {
margin-top: 1em;
margin-bottom: 2em;
margin-right: 25%;
float : right;
}<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar sticky-top navbar-expand-sm bg-dark">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="hero-image">
<div class="hero-text text-white">
<h1>Natalie Cardot</h1>
<h5>Web developer</h5>
<form action="mailto:nataliecardot@gmail.com" method="post" enctype="text/plain">
<button class="btn btn-dark">Contact Me</button>
</form>
</div>
</div>
</div>
</div>
<section id="about">
<div class="row">
<div class="col">
<div class="about">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit arcu quis lectus auctor, nec laoreet augue ornare. Proin vehicula id purus ac accumsan. Aliquam eu rutrum orci. Aliquam rhoncus ipsum sed nisi porta mattis. Cras euismod sed justo a vehicula. Maecenas nibh magna, auctor nec erat in, hendrerit blandit turpis. Curabitur laoreet viverra mi at consequat. Donec mollis tortor sem, vel pharetra magna mattis quis. Praesent erat dolor, lacinia at euismod quis, sodales eu orci. Fusce ut nibh dolor. Suspendisse potenti. Proin fermentum eros condimentum hendrerit mattis. Morbi libero nibh, tempus aliquam leo sed, elementum rutrum turpis. Pellentesque et pharetra sapien. Nulla sed quam vel ex dictum egestas in tempus risus. Donec lacus magna, feugiat sed lobortis finibus, bibendum vel magna.</p>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="row">
<div class="col">
<div class="portfolio">
<h2>Portfolio</h2>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="row">
<div class="col center-block">
<div class="contact">
<h2>Contact</h2>
<form action="mailto:nataliecardot@gmail.com" method="post" enctype="text/plain">
<div class="form-group">
<input type="text" class="form-control" id="contact-name" placeholder="Name" required>
</div>
<div class="form-group">
<input type="email" class="form-control" id="contact-email" aria-describedby="emailinfo" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="contact-message" placeholder="Your message" required>
</div>
<button type="submit" class="btn btn-dark">Send</button>
</form>
</div>
</div>
</div>
</section>
</div> <!-- End of container-fluid -->
<div class="footer">
<a href="https://www.linkedin.com/in/natalie-cardot/" target="_blank"><i class="fab fa-linkedin fa-2x"></i></a>
<a href="https://github.com/nataliecardot" target="_blank"><i class="fab fa-github fa-2x"></i></a>
<a href="https://codepen.io/nataliecardot/"><i class="fab fa-codepen fa-2x"></i></a>
<div class="footer-tag">
<p>Created by Natalie Cardot.</p>
</div>
答案 2 :(得分：0)
button {
margin-top: 1em;
margin-bottom: 2em;
float: right;
margin-right: 25%;
}
#contact { max-width: 960px; margin: 0 auto; }
form { padding: 75px 25px; }
我还建议在它周围添加一个容器，最大宽度为960px。整个表格区域。
答案 3 :(得分：0)
您需要使用50%创建表单margin:auto的宽度以使其保持居中，并使其中的输入100%填充表单的宽度，将您的按钮包含在内一个form-group并向其添加text-align:right，这将保持响应能力，
这是一个小提琴：https://jsfiddle.net/takius/j730vdmp/21/
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-family: "Playfair Display", serif;
padding-top: 0.5em;
}
h2,
h5 {
text-transform: uppercase;
/* Padding used instead of margins because whereas margins add space beyond element's box and therefore won't be colored, the inverse is true for padding */
padding: 0.5em 0;
margin: 0;
}
.about p {
padding: 0 4em 2em 4em;
margin: 0;
text-align: left;
}
.nav-link {
text-transform: uppercase;
color: white;
}
.nav-link:hover {
color: white;
}
.hero-image {
background-image: url(https://image.ibb.co/jEN7CS/workspace.jpg);
/* Set a specific height */
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
/* Resizes background image to fill entire container */
background-size: cover;
position: relative;
}
.about {
background-color: WhiteSmoke;
}
.portfolio {
background-color: LightGrey;
}
.contact {
background-color: WhiteSmoke;
}
/* Removes white space from sides of each column */
.col {
padding: 0;
}
.footer {
position: bottom;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 0.75rem;
background-color: grey;
}
.footer-tag {
color: white;
text-align: left;
padding: 15px;
}
.fab {
float: right;
padding: 10px;
color: white;
}
.fab:hover {
color: #4d4d4d;
}
.form-control {
width: 100%;
margin: 0 auto;
border-bottom: 1px solid #888;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-radius: 0;
padding: 10px 0px;
}
input[type=text],
input[type=email] {
background-color: WhiteSmoke;
}
button {
margin-top: 1em;
margin-bottom: 2em;
}
form {
width: 50%;
margin: auto;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- Grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar sticky-top navbar-expand-sm bg-dark">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="hero-image">
<div class="hero-text text-white">
<h1>Natalie Cardot</h1>
<h5>Web developer</h5>
<form action="mailto:nataliecardot@gmail.com" method="post" enctype="text/plain">
<button class="btn btn-dark">Contact Me</button>
</form>
</div>
</div>
</div>
</div>
<section id="about">
<div class="row">
<div class="col">
<div class="about">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit arcu quis lectus auctor, nec laoreet augue ornare. Proin vehicula id purus ac accumsan. Aliquam eu rutrum orci. Aliquam rhoncus ipsum sed nisi porta mattis. Cras euismod sed
justo a vehicula. Maecenas nibh magna, auctor nec erat in, hendrerit blandit turpis. Curabitur laoreet viverra mi at consequat. Donec mollis tortor sem, vel pharetra magna mattis quis. Praesent erat dolor, lacinia at euismod quis, sodales
eu orci. Fusce ut nibh dolor. Suspendisse potenti. Proin fermentum eros condimentum hendrerit mattis. Morbi libero nibh, tempus aliquam leo sed, elementum rutrum turpis. Pellentesque et pharetra sapien. Nulla sed quam vel ex dictum egestas
in tempus risus. Donec lacus magna, feugiat sed lobortis finibus, bibendum vel magna.</p>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="row">
<div class="col">
<div class="portfolio">
<h2>Portfolio</h2>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="row">
<div class="col center-block">
<div class="contact">
<h2>Contact</h2>
<form action="mailto:nataliecardot@gmail.com" method="post" enctype="text/plain">
<div class="form-group">
<input type="text" class="form-control" id="contact-name" placeholder="Name" required>
</div>
<div class="form-group">
<input type="email" class="form-control" id="contact-email" aria-describedby="emailinfo" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="contact-message" placeholder="Your message" required>
</div>
<div class="form-group" style="text-align:right;">
<button type="submit" class="btn btn-dark">Send</button>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
<!-- End of container-fluid -->
<div class="footer">
<a href="https://www.linkedin.com/in/natalie-cardot/" target="_blank"><i class="fab fa-linkedin fa-2x"></i></a>
<a href="https://github.com/nataliecardot" target="_blank"><i class="fab fa-github fa-2x"></i></a>
<a href="https://codepen.io/nataliecardot/"><i class="fab fa-codepen fa-2x"></i></a>
<div class="footer-tag">
<p>Created by Natalie Cardot.</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
答案 4 :(得分：0)
您只需使用d-flex类别，不需要使用内联CSS
<div class="d-flex flex-row-reverse">
<button type="submit" class="btn btn-dark" >Send</button>
</div>
那就是它。
答案 5 :(得分：0)
＆lt; div class =“form-group col-md-12 text-right mt-2”＆gt;
＆lt; button type =“submit”class =“btn btn-primary pl-4 pr-4”＆gt;提交＆lt; / button＆gt;
＆LT; / DIV＆GT;
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？