柔性集裝箱寬度擬合內容寬度

將父柔性集裝箱寬度擬合到子集的柔性集裝箱內容寬度時出現問題。柔性集裝箱寬度擬合內容寬度

使用布爾瑪，我有以下的HTML結構

.signup-form { 
 
     display:inline-flex; 
 
     align-items: center; 
 
    }

<div class="body"> 
 
    <div class="is-active modal"> 
 
    
 
     <div class="modal-background"> 
 
     </div> 
 
    
 
     <div class="modal-card signup-form"> 
 

 
      <header class="modal-card-head has-text-centered"> 
 
      <button class="delete"></button> 
 
      <p class="modal-card-title">Title</p> 
 
      </header> 
 
    
 
      <section class="modal-card-body"> 
 
      <input class="input" placeholder="Name"/ > 
 
      <input class="input" placeholder="Phone Number"/ > 
 
      <input class="input" placeholder="Email"/ > 
 
      <input class="input" placeholder="Address"/ > 
 
      </section> 
 
    
 
      <footer class="modal-card-foot"> 
 
      <nav class="page-control level has-text-centered is-mobile"> 
 
       <a class="button is-small is-info"> 
 
       Next 
 
       </a> 
 
      </nav> 
 
      </footer> 
 
    
 
     </div> 
 
     </div> 
 
    </div>

但它結束了適用於所有兒童的撓性容器，你可以在這裏看到：

http://codepen.io/anon/pen/mWqRxW

如何解決這個問題，並使父容器適合寬度e兒童柔性容器（在這種情況下是輸入的寬度）？

來源

2017-03-16 softcode

當容器有width: 640px時，容器不會收縮輸入元素。

刪除固定寬度。

revised codepen

來源

2017-03-16 20:58:32

顯然我嘗試過。這不是我想要做的。我試圖讓整個容器適合輸入的寬度。 – softcode

那麼顯然你不應該在'.modal-card'上使用'width：640px'。切換到'auto'。 http://codepen.io/anon/pen/GWOWGY –

這是框架的一部分。 – softcode

-2

你只需要添加：

header, 
footer{ 
    width: 100%; 
}

所以它需要所有的寬度可用。那是你想要的還是我在做什麼？

來源

2017-03-16 20:50:30

呀沒有被一點點比 – softcode

更復雜，你能解釋一下你的問題好一點的話，請這個問題嗎？ –

@softcode也許這樣？ http://codepen.io/anon/pen/OpOpEd –

柔性集裝箱寬度擬合內容寬度

回答

相關問題