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='&#64Example_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

Bootstrap系列之Flex布局

如何使 ngx-bootstrap 模态居中

如何解决Bootstrap中分页不能居中的问题

flex justify-content:space-around justify-content:space-between 布局区别