bootstrap面板拉伸頂部和隱藏在MD /小型設備中的元素

我有一個非常簡單的引導面板，但是當我在外部div內使用它時，它伸展到頂部並隱藏現有控件。bootstrap面板拉伸頂部和隱藏在MD /小型設備中的元素

當您在全屏幕中查看時，您會發現它正確顯示，但只要我調整瀏覽器大小或在移動模式下查看，面板開始向上移動並隱藏現有內容。

<div class="panel panel-info" style="margin-top: 8px!important;"> 
    <div class=""> 
     <button type="button" 
       class="close remove-cart-item update-cart-item" 
       data-dismiss="alert" 
       style="padding-right: 10px"> 
      <span aria-hidden="true">×</span> 
     </button> 
    </div> 
    <div class="panel-body"> 
     <div class="col-sm-5 col-xs-10 nopadding"> 
     More Description : 
      <input type="text" 
        class="form-control textArea" 
        maxlength="10" 
        size="10" 
        placeholder="Enter data Plate"> 
     </div> 
     <div class="col-sm-5 col-xs-10 nopadding"> 
      <select class="form-control textArea licenseStateDD" placeholder="Enter License State"> 
       <option value="TX">TEXAS</option> 
       <option value="UT">UTAH</option> 
      </select> 
     </div>

代碼的完整版可以發現on this JSFiddle。

來源

2017-08-15 Rushikesh Joshi

<button type="button" class="close" data-dismiss="modal">×</button>

不要添加DIV一部分，而不是用上面的部分。它會有希望的幫助。試過後，讓我知道它是否有效。打開面板div後，您應該結束輸入標籤在其中的div。

來源

2017-08-16 10:01:42

這仍然不能解決我的問題，當我調整瀏覽器的大小時，該div將與上面的控件混合。 –

我認爲面板的div高度將完整的區域，而不是調整響應，可能是你可以嘗試重置面板的車身高度，像這樣：

.panel-body { 
    height: 75%; 
} 
.panel { 
    height: 90%; 
    overflow: hidden; 
}

在手機屏幕尺寸檢測使用應用此高度jQuery的調整 http://api.jquery.com/resize/

來源

2017-08-16 13:46:26

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
</script> 
<style type="text/css"> 
.panel-heading h3 { 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
line-height: normal; 
width: 75%; 
padding-top: 8px; 
} 


</style> 
</head> 
<body> 
<label class="transponderSelection nopadding"> 




<div class="col-xs-4 col-sm-2"> 
<img class="img-responsive" id="image_2" alt="Movie" title="Movie"> 
</div> 
    <span id="validateTransponder_0" style="display:none">false</span> 

    <p id="currentTransponderLongDescr_0" style="white-space: normal;"> 
     Releasing soon. 
    </p> 
    <p id="" hidden=""> 
     2 
    </p> 

<div class="selectionArea"> 
    <div class="col-xs-9 col-xs-offset-3 col-sm-10 col-sm-offset-2 numbers-row" style="padding-bottom:15px!important"> 
     <input type="text" style="width: 30px; margin-left: 5px;" > 
    </div> 

    </div> 

    <br> 
<div class="purchase-details col-md-10 col-md-offset-1" > 


<div class="panel panel-info" style="margin-top: 8px!important;"> 
    <div><button type="button" class="close" data-dismiss="modal">&times;</button></div> 

    <div class="panel-body" > 
     <div class="col-sm-5 col-xs-10"> 
      <label class="col-md-12" style="padding-right:0px">License :</label> 
      <div class="control-div col-md-12 col-xs-12 licensePlate" style="padding-bottom:7px"> 
       <input type="text" class="form-control textArea licensePlate" maxlength="10" size="10" placeholder="Enter License Plate"> 
       </div> 
      </div> 



     <div class="col-sm-5 col-xs-10"> 
      <label class="col-md-12" style="padding-right:0px">Plate State:        </label> 
      <div class="control-div col-md-12 col-xs-12" style="padding- bottom:7px"> 
       <select class="form-control textArea licenseStateDD"  placeholder="Enter License State"> 
<option value="TX">TEXAS</option> 
<option value="UT">UTAH</option> 

     </select> 

      </div> 
     </div> 



    </div> 
</div> 

     </div> 





     </body> 
     </html>

我只是說在休息間。

來源

2017-08-16 13:58:17

bootstrap面板拉伸頂部和隱藏在MD /小型設備中的元素

回答

相關問題