Question

我遇到以下引导问题，我在使用＆＃34; text-center＆＃34;在中间输入框中居中文本时遇到问题。我猜这必须用填充做一些事情，但我不知道如何解决这个问题。＆＃34;立即申请＆＃34; H2标签未在下方输入框的中间对齐。

<div class="text-center"><h2>Apply Now</h2></div>
    <div class="row">
        <div class="col-md-4">
            @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control boldgray text-center ", @placeholder = "First Name" } })
            @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
        </div>


        <div class="col-md-4">
            @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control boldgray text-center ", @placeholder = "First Name" } })
            @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
        </div>


        <div class="col-md-4">
            @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control boldgray placeholder-left ", @placeholder = "First Name" } })
            @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
        </div>
     </div>

Answer 1

我添加了应该解决问题的代码。单独处理每个列。添加两个完整的col-md-12条目，它将换行并变为两行高。然后，您可以将文本居中放在第一个条目中。

<div class="container">
    <div class="row">
        <div class="col-md-12 text-center">
            <h2>Apply Now</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="col-md-12 text-center">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control boldgray", @placeholder = "First Name" } })
            </div>
            <div class="col-md-12 text-center">
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="col-md-4">
            <div class="col-md-12 text-center">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control boldgray", @placeholder = "First Name" } })
            </div>
            <div class="col-md-12 text-center">
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="col-md-4">
            <div class="col-md-12 text-center">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control boldgray placeholder-left ", @placeholder = "First Name" } })
            </div>
            <div class="col-md-12 text-center">
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
</div>

Answer 2

您是否尝试过清除浏览记录？外部css保存在缓存中，因此如果您不清除历史记录，则不会看到对css的更改，因为浏览器倾向于在更改之前使用css。

如果这不起作用，如何将css / class放在标题本身？

<div class="col-md-4">
    <h2 style="text-align:center">Apply Now</h2>
    <!--<h2 class="text-center">Apply Now</h2>-->
</div>

Bootstrap中心文本在输入框上

2 个答案: