将父Flex容器宽度与子容器的Flex容器内容宽度相匹配时出现问题。
使用Bulma,我有以下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
如何修复此问题,并使父Flex容器适合子Flex容器的宽度(在这种情况下是输入的宽度)?
答案 0 :(得分:1)
答案 1 :(得分:-2)
你只需要添加:
header,
footer{
width: 100%;
}
所以它需要所有宽度。那是你想要的还是我在想什么?