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

我们正在使用我们购买的模板，我正在尝试构造一个页面，但div存在问题。在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个像素，它与页面结束。而且我不知道为什么页面不会自动调整大小。

用于获取感

我的主要问题是，作为新来这个，我不知道在哪里看或改变什么模板原始版本。另外，“寄存器容器”存在于两张CSS表格中。既是一个长行...

编辑：

正如我所说的CSS表是一个烂摊子，一个真正的混乱。我正在粘贴与registerbox和register-containers有关的所有东西。

结果具有Registerbox超出-rtl.min.css

.register-container.registerbox {位置：相对;宽度：350像素重要;高度：560像素重要;填充：0; -webkit盒-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 {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！重要; -moz-background-clip：padding！important; border-radius：3px！important; background-clip：padding-box！important} .register-container.registerbox .registerbox-submit {padding：0 20px}

来源

2015-12-15 Ege Bayrak

registerbox是你的问题在哪里，你需要增加height属性。我首先将样式直接放在class =“”属性后面的div上进行测试，以确保增加它的效果。这样你就不用瞎搞了。

一旦你找出增加高度有多大，你可以用适当的值修改CSS文件。

来源

2015-12-15 21:47:52

刚刚尝试在课后在标签内添加一个style =“height：1000px”，但它只是让页面变长。除了提交按钮和页面结束之间的空间外，没有任何改变。尽管它以某种方式解决了一个问题，但它的可视性仍然没有改变。 –

@Ege Bayrak - 尝试改变注册箱类。 –

没有变化悲伤:(这一次甚至没有页面长度:) –

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

回答

相关问题