如何讓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％？

回答

相關問題