Question

我有一个非常简单的引导程序面板，但是当我在外部div中使用它时，它会向上伸展并隐藏现有控件。

在全屏查看时，您会看到以下小提琴正确显示，但只要我调整浏览器大小或在移动模式下查看，面板就会向上移动并隐藏现有内容。

<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。

Answer 1

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

不要添加div部分而是使用上面的部分。它将有希望帮助。在你尝试之后让我知道它是否有效。你应该在那个打开的面板div之后结束输入标签所在的div。

Answer 2

我认为Panel div高度占据了整个区域而没有响应大小调整，可能是你可以尝试重置面板主体高度，如下所示：

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

在移动屏幕尺寸检测中，使用jquery resize应用此高度 http://api.jquery.com/resize/

Answer 3

<!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>

我刚刚加入了中断。

自举面板在MD / Small设备中伸展到顶部并隐藏元素

3 个答案: