在 Bootstrap 4 中将表单居中对齐 [英] Align the form to the center in Bootstrap 4

查看：35
本文介绍了在 Bootstrap 4 中将表单居中对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试将表单与中心对齐并保持响应.我尝试了多种方法，但都没有成功.我试图将所有文本和表单居中.我正在使用 Bootstrap v4.我不确定这是否有帮助.

HTML:

<div id="cover-caption"><div id="容器"><div class="col-sm-10 col-sm offset-1"><h1 class="display-3">欢迎使用 Bootstrap 4</h1><div class="info-form"><form action="" class="form-inline"><div class="form-group"><label class="sr-only">Name</label><input type="text" class="form-control" placeholder="Jane Doe">

<div class="form-group"><label class="sr-only">电子邮件</label><input type="text" class="form-control" placeholder="jane.doe@example.com">

<button type="submit" class="btn btn-success ">好的，去吧！</button></表单>

<br><a href="#nav-main" class="btn btn-secondary-outline btn-sm" role="button">&darr;</a>

</节>

CSS:

html,身体{高度:100%；}#覆盖 {背景:#222 url('../img/stars.jpg') 居中不重复；背景尺寸:封面；白颜色;高度:100%；文本对齐:居中；显示:弹性；对齐项目:居中；

}

#cover-caption {宽度:100%；

}

解决方案

您需要使用各种 Bootstrap 4 居中方法...

https://codeply.com/go/Am5LvvjTxC

此外，要偏移列，col-sm-* 必须包含在 .row 中，并且 .row 必须在容器中...

<div id="cover-caption"><div id="容器"类=容器"><div class="row"><div class="col-sm-10 offset-sm-1 text-center"><h1 class="display-3">欢迎使用 Bootstrap 4</h1><div class="info-form"><form action=""class="form-inline justify-content-center"><div class="form-group"><label class="sr-only">Name</label><输入类型=文本"类=表单控制"占位符=简·多伊">
<div class="form-group"><label class="sr-only">Email</label><输入类型=文本"类=表单控制"placeholder="jane.doe@example.com">
<按钮类型=提交"class=btn btn-success">好吧，去吧！</button></表单>
<br><a href="#nav-main";class="btn btn-secondary-outline btn-sm";角色=按钮">↓</a>
</节>

I am trying to align the form to the center and keep it responsive. I have tried several ways but no success. I am trying to center all the text and the form. I am using Bootstrap v4. I am not sure if that helps.

HTML:

<section id="cover">
     <div id="cover-caption">
         <div id="container">
             <div class="col-sm-10 col-sm offset-1">
                 <h1 class="display-3">Welcome to Bootstrap 4</h1>
                 <div class="info-form">
                 <form action="" class="form-inline">
                    <div class="form-group">
                        <label class="sr-only">Name</label>
                        <input type="text" class="form-control" placeholder="Jane Doe">
                    </div>
                    <div class="form-group">
                        <label class="sr-only">Email</label>
                        <input type="text" class="form-control" placeholder="jane.doe@example.com">
                    </div>
                    <button type="submit" class="btn btn-success ">okay, go!</button>
                </form>
                </div>
                <br>

                <a href="#nav-main" class="btn btn-secondary-outline btn-sm" role="button">&darr;</a>
             </div>
         </div>
     </div>
 </section>

CSS:

html,
body{
 height: 100%;
}

#cover {
  background: #222 url('../img/stars.jpg') center center no-repeat;
  background-size: cover;
  color: white;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;

}

#cover-caption {
  width: 100%;

}

解决方案

You need to use the various Bootstrap 4 centering methods...

https://codeply.com/go/Am5LvvjTxC

Also, to offset the column, the col-sm-* must be contained within a .row, and the .row must be in a container...

<section id="cover">
    <div id="cover-caption">
        <div id="container" class="container">
            <div class="row">
                <div class="col-sm-10 offset-sm-1 text-center">
                    <h1 class="display-3">Welcome to Bootstrap 4</h1>
                    <div class="info-form">
                        <form action="" class="form-inline justify-content-center">
                            <div class="form-group">
                                <label class="sr-only">Name</label>
                                <input type="text" class="form-control" placeholder="Jane Doe">
                            </div>
                            <div class="form-group">
                                <label class="sr-only">Email</label>
                                <input type="text" class="form-control" placeholder="jane.doe@example.com">
                            </div>
                            <button type="submit" class="btn btn-success ">okay, go!</button>
                        </form>
                    </div>
                    <br>

                    <a href="#nav-main" class="btn btn-secondary-outline btn-sm" role="button">↓</a>
                </div>
            </div>
        </div>
    </div>
</section>

这篇关于在 Bootstrap 4 中将表单居中对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆