如何让Flexbox允许输入宽度为100％？

我有一个媒体查询来调整表格元素较小显示以下Flexbox的形式。在较大的显示器上，我希望表单项是内联的，但在较小的屏幕上，我希望表单元素可以堆叠并保持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; 
    } 
}

来源

2017-07-25 AnApprentice

你有几个多余的div，只会使造型更难...... – vals

我同意..不知道如何避免给定的方式反应工作 – AnApprentice

添加到您的代码：

.form-group { 
    flex: 1 0 auto; 
}

revised demo

这告诉柔性物品在同一行上时，共享空间。

但是，当它们分开放在不同的线上时，每个线都将消耗所有可用空间。

来源

2017-07-25 17:03:23

我想你.form-mod { display: inline-block; }可能会出现故障。您可以为较小的屏幕编写媒体查询，将其更改为block。

// Small devices (landscape phones, 34em and up) 
@media (min-width: 34em) { 
    .form-mod { 
    display: block; 
    } 
}

来源

2017-07-25 16:59:04

试过，没有影响 – AnApprentice

如何让Flexbox允许输入宽度为100％？

回答

相关问题