Html Bootstrap 4图像滑块，用于添加表单，但不能太小且居中

我使用了我的angular 6项目登录页，carousel工作正常，我添加了一些表单，比如a，我有一些表单无法处理小尺寸和中心的问题

有人知道如何像booking.com那样做吗

我的代码部分

.section.section中心{
位置：绝对位置；
最高：50%；
左：0；
右：0；
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；
}
#预订：之前{
内容：''；
位置：绝对位置；
左：0；
右：0；
底部：0；
排名：0；
背景：rgba（255,255,255,0.15）；
}
.订票表格{
背景：#fff；
边界半径：2px；
}
.预订表>表.行.无保证金{
右边距：0px；
左边距：0px；
}
.booking form>form.row.无边距>[类别*=“列-”]{
右边填充：0px；
左侧填充：0px；
}
.预订表格.表格组{
位置：相对位置；
填充：25px；
边缘底部：0px；
}
。预订表格。表格组：之后{
内容：''；
背景：rgba（129131144,0.15）；
位置：绝对位置；
顶部：25px；
底部：0；
右：0px；
宽度：2倍；
高度：75px；
}
.预订表格.表格控制{
背景色：透明；
边界半径：0px；
边界：无；
高度：50px；
-webkit盒阴影：无；
盒影：无；
字体大小：20px；
颜色：#222；
字体大小：400；
填充：0；
}
.预订表单.表单控件：-webkit输入占位符{
颜色：#818390；
}
.预订表单.表单控件：-ms输入占位符{
颜色：#818390；
}
.预订表单.表单控件：：占位符{
颜色：#818390；
}
.预订表单输入[type=“date”]。表单控件：无效{
颜色：#818390；
}
。预订表单选择。表单控制{
-webkit外观：无；
-moz外观：无；
外观：无；
}
.预订表单选择.表单控件+.选择箭头{
位置：绝对位置；
右：0px；
底部：30px；
宽度：32px；
线高：32px；
高度：32px；
文本对齐：居中；
指针事件：无；
颜色：#818390；
字体大小：14px；
}
.预订表单选择.表单控件+.选择箭头：之后{
内容：'\279C'；
显示：块；
-webkit变换：旋转（90度）；
变换：旋转（90度）；
}
.预订表格.表格标签{
颜色：#07c；
显示：块；
字体大小：400；
高度：25px；
线高：25px；
字体大小：14px；
}
.订票表格.表格btn{
填充：25px；
}
.预订表格.提交btn{
背景：#07c；
边界：无；
文本转换：大写；
显示：块；
边界半径：2px；
宽度：100%；
高度：75px；
字体大小：16px；
字体大小：400；
颜色：#fff；
}
/*全局样式
-------------------------------------------------- */
/*页脚下方的填充和较轻的正文文本*/
身体{
垫面：3rem；
垫底：3rem；
颜色：#5A5A；
}
/*自定义旋转木马
-------------------------------------------------- */
/*旋转木马基类*/
旋转木马{
边缘底部：4rem；
}
/*由于定位图像，我们需要帮助解决标题问题*/
.旋转木马标题{
底部：3rem；
z指数：10；
}
/*由于img元素的定位而声明高度*/
.传送带项目{
最小高度：计算（100vh-110px）；
背景色：#777；
}
.carousel项目>img{
位置：绝对位置；
排名：0；
左：0；
最小宽度：100%；
最小高度：计算（100vh-110px）；
}
/*营销内容
-------------------------------------------------- */
/*将旋转木马下方三列内的文本居中对齐*/
.市场营销。col-lg-4{
保证金底部：1.5雷姆；
文本对齐：居中；
}
.市场推广h2{
字体大小：400；
}
.市场营销。col-lg-4 p{
保证金权利：.75rem；
左边缘：.75rem；
}
/*特写
------------------------- */
.特征分割器{
边距：5rem 0；/*将引导带隔开
更多*/
}
/*精简营销标题*/
.专题标题{
字体大小：300；
线高：1；
字母间距：-.05rem；
}
/*响应式CSS
-------------------------------------------------- */
@介质（最小宽度：40em）{
/*增大传送带内容的大小*/
.carousel标题p{
保证金底部：1.25雷姆；
字体大小：1.25rem；
线高：1.4；
}
.专题标题{
字体大小：50px；
}
}
@介质（最小宽度：62em）{
.专题标题{
边缘顶部：7雷姆；
}
}

地方
事件类型
事件1
事件1
事件1
检查



示例标题。
我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。Donec在eget metus为非mi porta孕妇确定了最佳身份。我不知道是谁干的，我不知道是谁干的

另一个例子是标题。
我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。Donec在eget metus为非mi porta孕妇确定了最佳身份。我不知道是谁干的，我不知道是谁干的

再来一杯。
我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。Donec在eget metus为非mi porta孕妇确定了最佳身份。我不知道是谁干的，我不知道是谁干的

不需要额外的行（

） 而是添加一个div（此处：

formwr