Bootstrap justify-content 不适用于表单
Posted
技术标签:
【中文标题】Bootstrap justify-content 不适用于表单【英文标题】:Bootstrap justify-content not working with form 【发布时间】:2021-05-17 17:41:55 【问题描述】:我有一个用于捕获 Twitter 句柄的输入表单。我只是想将输入和提交按钮置于页面中心,但由于某种原因,我无法使用它。这是 CSS/html 的相关 sn-p(另请注意,我使用的是 Bootstrap 和 ASP.NET)
<form asp-action="GetTwitterHandle">
<div class="submitView">
<input name="UserHandle" class="form-control" placeholder='@Example_User'/>
<input type="submit" class="btn btn-primary" value="Get Stats" />
</div>
</form>
.submitView
border: 1px solid orange;
height: auto;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
【问题讨论】:
【参考方案1】:在 submitView 类中设置 height: 100vh;
。它将水平和垂直对齐项目。
【讨论】:
【参考方案2】:如果你想要这样的东西...删除 width: 50% 并添加 height: 100vh;
如果没有帮助,请通过评论告诉我。
【讨论】:
我只有它,因为没有它,文本框几乎跨越了整个页面。虽然它在 JSFiddle 中没有这样做,所以也许它与我缺少的另一个动作有关? 我刚刚在 JSfiddle 中做了同样的事情。它正在工作。这段代码是一小段,对吧?也许是其他原因导致了问题。以上是关于Bootstrap justify-content 不适用于表单的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 justify-content 或 align-self 来居中? (仅限引导程序)
无法垂直对齐文本 - angularJS + bootstrap + flexbox
flex justify-content:space-around justify-content:space-between 布局区别