Bootstrap justify-content 不适用于表单

Posted 2023-03-06

【中文标题】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 中做了同样的事情。它正在工作。这段代码是一小段，对吧？也许是其他原因导致了问题。