验证摘要上方的间距来自何处以及如何将其删除?

时间:2014-12-29 22:55:01

标签: html css twitter-bootstrap asp.net-mvc-4 razor

我有以下问题:

Problem with spacing

生成此代码的代码来自bootstrap模板,它看起来像这样:

@model LoginOrRegisterViewModel

@{
    ViewBag.Title = "Registreer je vandaag bij de Zaaikalender";
}

<!-- Fixed main screen -->
<div id="login" class="bg imglogin">

    <!-- Signup box inspired by http://bootsnipp.com/snippets/featured/login-amp-signup-forms-in-panel -->
    <div id="signupbox" style="padding: 3.5%; font-size: 12px;" class="mainbox span12">
        <div class="panel panel-info">
            <div class="panel-heading">
                <div style="float:right; font-size: 85%; position: relative; top:-10px">
                    <a id="signinlink" href="Login">Inloggen</a>
                </div>
            </div>  
            <div class="panel-body">

                @using (Html.BeginForm("Register", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class="form-horizontal", @role="form"}))
                {
                    @Html.AntiForgeryToken()

                    <div class="form-group">
                        @Html.ValidationSummary()  
                    </div>

                    <div class="form-group">
                        <div class="col-md-3" style="color: black;">
                            @Html.LabelFor(vm => vm.Register.FullName)
                        </div>
                        <div class="col-md-9">
                            @Html.TextBoxFor(vm => vm.Register.FullName, new { @class = "form-control", @placeholder = "Volledige naam", @AutoComplete ="off" } )
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-3" style="color: black;">
                            @Html.LabelFor(vm => vm.Register.UserName)
                        </div>
                        <div class="col-md-9">
                            @Html.TextBoxFor(vm => vm.Register.UserName, new { @class = "form-control", @placeholder = "Gebruikersnaam", @Autocomplete = "off" } )
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-3" style="color: black;">
                            @Html.LabelFor(vm => vm.Register.Email)
                        </div>
                        <div class="col-md-9">
                            @Html.TextBoxFor(vm => vm.Register.Email, new { @class = "form-control", @placeholder = "E-mail ", @AutoComplete ="off"})
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-3" style="color: black;">
                            @Html.LabelFor(vm => vm.Register.Password)
                        </div>
                        <div class="col-md-9">
                            @Html.PasswordFor(vm => vm.Register.Password, new { @class = "form-control", @placeholder = "Wachtwoord", @AutoComplete ="off"})
                        </div>
                    </div>

                    <div class="form-group">
                        <!-- Button -->                                        
                        <div class="col-md-offset-3 col-md-9">
                            <button type="submit" class="btn btn-info"><i class="icon-hand-right"></i> &nbsp Registreer</button>
                        </div>
                    </div>

                }

             </div><!-- End panel body -->
        </div><!-- End panel -->
    </div><!-- End signup box -->

</div><!-- End main login div -->

以上@Html.ValidationSummary()是文字。间距是form-group类,但是其他对象没有它,所以我怀疑它是验证摘要的CSS中的东西。有谁知道呢?

1 个答案:

答案 0 :(得分:1)

从错误包装器的<ul>元素中删除边距。

小提琴:http://jsfiddle.net/ah83Ln4L/

只需将其添加到style.css:

.validation-summary-errors ul {
    margin-top: 0;
}