柔性集装箱宽度拟合内容宽度

将父柔性集装箱宽度拟合到子集的柔性集装箱内容宽度时出现问题。柔性集装箱宽度拟合内容宽度

使用布尔玛，我有以下的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 –

柔性集装箱宽度拟合内容宽度

回答

相关问题