如何让 Flexbox 允许输入为 100% 宽度?
How to get Flexbox to allow an input to be 100% width?
我有以下 flexbox 表单,由 bootstrap 4.
提供支持
https://jsfiddle.net/kkt0k2bs/1/
我有一个媒体查询来调整表单元素的大小以缩小显示范围。
在较大的显示器上,我希望表单项是内联的,但在较小的屏幕上,我希望表单元素以 100% 的比例堆叠。
输入在较小的显示器上不会达到 100% 宽度...如何启用代码以在较小的显示器上使宽度达到 100%?
HTML:
<div class="form-mod">
<form class="form-inline justify-content-center d-inline-flex">
<div class="form-group">
<div>
<input type="text" name="email" value="" placeholder="Enter your email..." class="form-control">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Request an Invite</button>
</div>
</form>
</div>
CSS:
.form-mod {
display: inline-block;
text-align: center;
padding: 16px 32px;
background: rgba(0, 0, 0, 0.2);
border-radius: 3;
box-shadow: 0 20px 63px 0 rgba(0,0,0,.6);
[type="text"] {
width: 260px;
margin-right: 16px;
border-radius: 100px;
padding-left: 18px;
border-radius: $border-radius;
font-size: 16px;
}
@include media-breakpoint-down(sm) {
.form-group {
width: 100%;
}
[type="text"] {
width: 100%;
margin: 0 0 16px 0;
display: block;
}
opacity: .5;
}
}
我认为您的 .form-mod { display: inline-block; }
可能有问题。您可以为较小的屏幕编写一个媒体查询,将其更改为 block
.
// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) {
.form-mod {
display: block;
}
}
将此添加到您的代码中:
.form-group {
flex: 1 0 auto;
}
这告诉 flex 项目在同一行时共享 space。
但是当他们分到不同的行时,每个人都会消耗所有可用的space。
我有以下 flexbox 表单,由 bootstrap 4.
提供支持https://jsfiddle.net/kkt0k2bs/1/
我有一个媒体查询来调整表单元素的大小以缩小显示范围。
在较大的显示器上,我希望表单项是内联的,但在较小的屏幕上,我希望表单元素以 100% 的比例堆叠。
输入在较小的显示器上不会达到 100% 宽度...如何启用代码以在较小的显示器上使宽度达到 100%?
HTML:
<div class="form-mod">
<form class="form-inline justify-content-center d-inline-flex">
<div class="form-group">
<div>
<input type="text" name="email" value="" placeholder="Enter your email..." class="form-control">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Request an Invite</button>
</div>
</form>
</div>
CSS:
.form-mod {
display: inline-block;
text-align: center;
padding: 16px 32px;
background: rgba(0, 0, 0, 0.2);
border-radius: 3;
box-shadow: 0 20px 63px 0 rgba(0,0,0,.6);
[type="text"] {
width: 260px;
margin-right: 16px;
border-radius: 100px;
padding-left: 18px;
border-radius: $border-radius;
font-size: 16px;
}
@include media-breakpoint-down(sm) {
.form-group {
width: 100%;
}
[type="text"] {
width: 100%;
margin: 0 0 16px 0;
display: block;
}
opacity: .5;
}
}
我认为您的 .form-mod { display: inline-block; }
可能有问题。您可以为较小的屏幕编写一个媒体查询,将其更改为 block
.
// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) {
.form-mod {
display: block;
}
}
将此添加到您的代码中:
.form-group {
flex: 1 0 auto;
}
这告诉 flex 项目在同一行时共享 space。
但是当他们分到不同的行时,每个人都会消耗所有可用的space。