在div中添加一個新元素將其他元素向下推出

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個像素，它與頁面結束。而且我不知道爲什麼頁面不會自動調整大小。

用於獲取感

我的主要問題是，作爲新來這個，我不知道在哪裏看或改變什麼模板原始版本。另外，「寄存器容器」存在於兩張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}

register-container in beyond-rtl.min.css

register-container {position：relative; margin：8％auto; max-width：350px} （其餘結果也在寄存器搜索結果中）

Answer 1

registerbox是你的問題在哪裏，你需要增加height屬性。我首先將樣式直接放在class =「」屬性後面的div上進行測試，以確保增加它的效果。這樣你就不用瞎搞了。

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