本文介绍如何通过调整CSS样式实现响应式表单布局，包括去除特定代码、使用flex布局来确保输入框和按钮在同一行显示，并通过设置外边距来增加元素间的间距。
So here we go to achieve this, you have to remove this piece of code from your styles:
.form-inline {
flex-direction: column;
}
Why though?
Because flex-direction: column; will make every one of your div children as an independent row, and whole of them as a column. Like the one, you achieved earlier.
Then the next step to achieve and inline form inputs and buttons here is to move your button tag out of the independent division with the same class and wrap all of them into a single div just like this:
Subscribe
The final cut
At the end all of your code will be something like the below snippet:
h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 25px;
line-height: 1.5;
padding-top: 0;
margin-top: 0;
color: inherit;
}
.form-inline {
display: flex;
justify-content: center;
align-items: center;
}
.newsletter-subscribe .intro {
font-size: 16px;
max-width: 500px;
margin: 0 auto 25px;
}
.newsletter-subscribe .intro p {
margin-bottom: 35px;
}
.newsletter-subscribe .newsletter-subscribe form .form-control {
background: #eff1f4;
border: none;
border-radius: 3px;
box-shadow: none;
outline: 0;
color: inherit;
text-indent: 9px;
height: 45px;
margin-right: 10px;
min-width: 250px;
}
newsletter
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
