Question

我们正在使用我们购买的模板，我试图塑造一个页面但是div存在问题。

当我尝试在里面添加新文本框时，底部的其他文本框会被推出。

这是我第一次使用bootstrap，而且我也是css的新手。我不知道造成这个问题的原因。

这是工作中的代码。还会增加2个文本框到底部，顶部也会添加一个组合框。

<div class="register-container animated fadeInDown">
    <div class="registerbox bg-white">
        <div class="registerbox-title">Register</div>
        @Html.ValidationSummary("", new { @class = "text-danger" })

        <div class="registerbox-caption ">Lütfen Bilgilerinizi Giriniz</div>
        <div class="registerbox-textbox">
            @Html.Bootstrap().TextBoxFor(t => t.FirmaUnvani).Placeholder("Firma Ünvanı")
        </div>
        <div class="registerbox-textbox">
            @Html.Bootstrap().TextBoxFor(t => t.Sehir).Placeholder("Şehir")
        </div>
        <div class="registerbox-textbox">
            @Html.Bootstrap().TextBoxFor(t => t.Adres).Placeholder("Adres")
        </div>
        <div class="registerbox-textbox">
            @Html.Bootstrap().TextBoxFor(t => t.PostaKodu).Placeholder("Posta Kodu")
        </div>
        <div class="registerbox-textbox">
            @Html.Bootstrap().TextBoxFor(t => t.Email).Placeholder("Email Address")
        </div>
        <div class="registerbox-textbox">
            @Html.Bootstrap().TextBoxFor(t => t.Email).Placeholder("Email Address")
        </div>
        <div class="registerbox-textbox">
            @Html.Bootstrap().TextBoxFor(t => t.Email).Placeholder("Email Address")
        </div>
        <div class="registerbox-textbox">
            @Html.Bootstrap().PasswordFor(t => t.Password).Placeholder("Enter Password")
        </div>
        <div class="registerbox-textbox">
            @Html.Bootstrap().PasswordFor(t => t.ConfirmPassword).Placeholder("Confirm Password")
        </div>
        @*<hr class="wide" />*@
        <div class="registerbox-textbox">
            @Html.Bootstrap().TextBoxFor(t => t.Name).Placeholder("Name")
        </div>
        <div class="registerbox-textbox">
            @Html.Bootstrap().TextBoxFor(t => t.Family).Placeholder("Family")
        </div>
        <div style="padding-bottom:5px;padding-left:5px;background-color:white">
            <div class="checkbox">
                <label>
                    <input type="checkbox" class="colored-primary" checked="checked">
                    <span class="text darkgray"> <a class="themeprimary">Portal Kullanım Sözleşmesi</a>'ni okudum ve kabul ediyorum.</span>
                </label>
            </div>
        </div>
        <div class="registerbox-submit">
            @Html.Bootstrap().SubmitButton().Text("SUBMIT").Color(BootstrapColors.Primary).HtmlAttributes(new { @class = "pull-right" })
        </div>
    </div>
    <div class="logobox">
    </div>
</div>

这是模板上同一页面的原始版本。

<div class="register-container animated fadeInDown">
        <div class="registerbox bg-white">
            <div class="registerbox-title">Register</div>
            @Html.ValidationSummary("", new { @class = "text-danger" })

            <div class="registerbox-caption ">Please fill in your information</div>
            <div class="registerbox-textbox">
                @Html.Bootstrap().TextBoxFor(t => t.Email).Placeholder("Email Address")
            </div>
            <div class="registerbox-textbox">
                @Html.Bootstrap().PasswordFor(t => t.Password).Placeholder("Enter Password")
            </div>
            <div class="registerbox-textbox">
                @Html.Bootstrap().PasswordFor(t => t.ConfirmPassword).Placeholder("Confirm Password")
            </div>
            <hr class="wide" />
            <div class="registerbox-textbox">
                @Html.Bootstrap().TextBoxFor(t => t.Name).Placeholder("Name")
            </div>
            <div class="registerbox-textbox">
                @Html.Bootstrap().TextBoxFor(t => t.Family).Placeholder("Family")
            </div>
            <div class="registerbox-textbox">
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-xs-6 padding-right-10">
                        @Html.Bootstrap().TextBoxFor(t => t.Month).Placeholder("Month")
                    </div>
                    <div class="col-lg-3 col-sm-3 col-xs-3 no-padding padding-right-10">
                        @Html.Bootstrap().TextBoxFor(t => t.Day).Placeholder("Day")
                    </div>
                    <div class="col-lg-3 col-sm-3 col-xs-3 no-padding-left">
                        @Html.Bootstrap().TextBoxFor(t => t.Year).Placeholder("Year")
                    </div>
                </div>
            </div>
            <div class="registerbox-textbox no-padding-bottom">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" class="colored-primary" checked="checked">
                        <span class="text darkgray">I agree to the Company <a class="themeprimary">Terms of Service</a> and Privacy Policy</span>
                    </label>
                </div>
            </div>
            <div class="registerbox-submit">
                @Html.Bootstrap().SubmitButton().Text("SUBMIT").Color(BootstrapColors.Primary).HtmlAttributes(new { @class = "pull-right" })
            </div>
        </div>
        <div class="logobox">
        </div>
    </div>

破碎的版本，提交被严重压低，它与页面末尾之间有1或2个像素。而且我也不知道为什么页面也没有自己调整大小。

模板原始版本有意义

我的主要问题是，对此我不熟悉我不知道在哪里看或改变什么。此外，＆＃34;注册容器＆＃34;存在于两张css表中。两条长线......

编辑：

正如我所说的那些css表是一团糟，真是一团糟。我现在粘贴了与寄存器和寄存器容器相关的所有内容。

在 beyond-rtl.min.css

中拥有Registerbox的结果

.register-container.registerbox{
    position:relative;
    width:350px !important;
    height:560px !important;
    padding:0;
    -webkit-box-shadow:0 0 14px rgba(0,0,0,.1);
    -moz-box-shadow:0 0 14px rgba(0,0,0,.1);
    box-shadow:0 0 14px rgba(0,0,0,.1)
}
.register-container .registerbox .registerbox-title{
    position:relative;
    text-align:right;
    width:100%;
    height:35px;
    padding:20px 20px 0;
    font-family:'Lucida Sans','trebuchet MS',Arial,Helvetica;
    font-size:18px;
    text-transform:uppercase;
    font-weight:normal;
    color:#444
}
.register-container .registerbox .registerbox-caption{
    font-size:14px;
    font-weight:500;
    color:#a9a9a9;
    padding:15px 20px 0
}
.register-container .registerbox .registerbox-textbox{
    padding:10px 20px
}
.register-container .registerbox .registerbox-textbox .form-control{
    -webkit-border-radius:3px !important;
    -webkit-background-clip:padding-box !important;
    -moz-border-radius:3px !important;
    -moz-background-clip:padding !important;
    border-radius:3px !important;
    background-clip:padding-box !important
}
.register-container .registerbox .registerbox-submit{
    padding:0 20px
}

在 beyond-min.css

中拥有registerbox的结果

.registerbox{
    position:relative;
    width:350px !important;
    height:560px !important;
    padding:0;
    -webkit-box-shadow:0 0 14px rgba(0,0,0,.1);
    -moz-box-shadow:0 0 14px rgba(0,0,0,.1);
    box-shadow:0 0 14px rgba(0,0,0,.1)
}
.register-container .registerbox .registerbox-title{
    position:relative;
    text-align:left;
    width:100%;
    height:35px;
    padding:20px 20px 0;
    font-family:'Lucida Sans','trebuchet MS',Arial,Helvetica;
    font-size:18px;
    text-transform:uppercase;
    font-weight:normal;
    color:#444
}
.register-container .registerbox .registerbox-caption{
    font-size:14px;
    font-weight:500;
    color:#a9a9a9;
    padding:15px 20px 0
}
.register-container .registerbox .registerbox-textbox{
    padding:10px 20px
}
.register-container .registerbox .registerbox-textbox .form-control{
    -webkit-border-radius:3px !important;
    -webkit-background-clip:padding-box !important;
    -moz-border-radius:3px !important;
    -moz-background-clip:padding !important;
    border-radius:3px !important;
    background-clip:padding-box !important
}
.register-container .registerbox .registerbox-submit{
    padding:0 20px
}

beyond-rtl.min.css

中的

注册容器

register-container{
    position:relative;
    margin:8% auto;
    max-width:350px
}

Answer 1

registerbox是你的问题所在，你需要增加height属性。我会先在类=＆＃34;＆＃34;之后将样式直接放在div上。要测试的属性以确保增加它将起作用。通过这种方式，您还不得不捣乱css。

一旦你弄清楚增加多少高度，就可以用适当的值修改CSS文件。

Answer 2

在这里进行了一些挖掘，但是未精简代码以使其更易于阅读，并且我看到的每个height属性都有一个静态值（即350px），这就是问题所在。您需要更改容器中的这些高度，以允许更多内容或允许浏览器自动选择其高度。

在div中添加一个新元素会向下推出其他元素

2 个答案: