我有一个新的奇怪的 html/bootstrap/jquery 问题...当屏幕具有一定宽度(大于导航切换宽度,但小于正常宽度)时,所有选择框都会“禁用”。
查看我的 jsFiddle here .请注意,它在宽屏幕上运行良好,但在中等尺寸的屏幕上它不显示,而在小屏幕上它再次运行良好。
我真的不知道如何搜索这个问题,但我所做的搜索没有返回任何有趣的东西。希望你们有线索...
我已经测试了最新的 Chrome 和 IE,但有趣的是,早期版本的 IE 可以按预期工作(9 和 10),但 Edge/11 不工作。
<div class="container kidliste" style="" id="HEADER_243">
<div class="row" onclick="clickMessageList(243);">
<div class="col-sm-3">
<div class="text-left" style="display: inline-block; font-size: 0.8em; margin-top: 7px; margin-left: 2px">
<i class="fa fa-clock-o"></i> 27.02.2014 - 23:31
</div>
<div class="text-right" style="display: inline-block; font-size: 0.8em;">
<i class="fa fa-phone"></i> 40055206
</div>
</div>
<div class="col-sm-7">
<div style="display: inline-block">
<p style="margin: 0; overflow: hidden; height: 1.2em; margin: 3px;">
<a style=" ">test pricegroup</a>
</p>
</div>
</div>
<div class="col-sm-2 text- text-right">
</div>
</div>
</div>
<div class="panel panel-default midliste" data-kid="243" id="MELDINGER_243" style="margin: 0 0 25px 80px">
<div class="panel" style="margin: 2px;padding: 0; margin-bottom: 5; padding-bottom: 0; color: #D17600">
<div class="row">
<div class="col-sm-2" style="padding: 2px; margin-left: 15px">
27.02.2014 - 23:31 </div>
<div class="col-sm-7" style="display: inline-block ; min-height: 3em;">
test pricegroup </div>
<div class="col-sm-2 pull-right text-right" style="margin-right: 25px;">
<a onclick="confirmSensur(1043, 243)" style="text-decoration: underline; font-size: 0.8em;">Sensurer melding!</a>
</div>
</div>
</div>
<div class="panel" style="margin: 2px;padding: 0; margin-bottom: 5; padding-bottom: 0; color: grey">
<div class="row">
<div class="col-sm-2" style="padding: 2px; margin-left: 15px">
27.02.2014 - 23:31 </div>
<div class="col-sm-7" style="display: inline-block ; min-height: 3em;">
Meldingen er mottatt og vil bli behandlet så snart som mulig. Mvh Legene på Høyden </div>
<div class="col-sm-2 pull-right text-right" style="margin-right: 25px;">
</div>
</div>
</div>
<div class="panel" style="margin: 2px;padding: 0; margin-bottom: 0; padding-bottom: 0">
<div class="row">
<div class="col-md-2" style="margin-left: 15px"></div>
<div class="col-md-8">
<form class="form-inline sendMessage" id="sendMessage_243" role="form" method="post" action="index2.php?page=Innboks&action=sendMelding">
<input type="hidden" name="kid" value="243">
<input type="hidden" name="type" value="0">
<div class="input-group">
<span class="input-group-addon btn btnStandardmelding" onclick="$(this).MessageWiz('#TEXT_243')">
Standardmelding <i class="fa fa-caret-right"></i>
</span>
<textarea id="TEXT_243" name="msg" class="form-control custom-control" rows="2" style="resize:none;"></textarea>
<span onclick="$(this).parents('form').submit()" class="input-group-addon btn">Send</span>
</div>
</form>
</div>
</div>
</div>
<div class="panel" style="margin: 2px;padding: 0; margin-bottom: 0; padding-bottom: 0">
<div class="row">
<div class="col-md-2" style="margin-left: 15px"></div>
<div class="col-md-8">
<form id="oppdaterStatus_243" action="index2.php?page=Innboks&action=oppdaterStatus" method="post" class="form-horizontal oppdaterStatus">
<input type="hidden" name="kid" value="243">
<div class="form-group container" style="margin-left: -15px">
<label class="control-label col-sm-1" for="innboks">Flytt:</label>
<div class="col-sm-3">
<select class="input-xlarge form-control" name="innboks" id="innboks">
<option value="2">Ferdig</option>
<option value="1" selected="">Ubehandlet
</option>
<option value="4">Diverse</option>
<option value="3">Arbeidsliste
</option>
</select>
</div>
<label class="control-label col-sm-1" for="tag">Tag:</label>
<div class="col-sm-3">
<select id="tag" class="input-xlarge form-control" name="tag">
<option value="0">-</option>
<option value="1">Morten Andre Pedersen</option>
<option value="2">Richard Hagen</option>
<option value="47">Ola Nordmann</option>
<option value="58">Test Testesen</option>
</select>
</div>
<div class="text-right col-md-3">
<button type="submit" class="btn btn-default">Lagre oppdatering</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
最佳答案
“Lagre oppdatering”按钮显示为 block 元素并覆盖左侧的 float 元素(因此您无法单击它们)。将其样式从 text-align: right
更改为 float: right
修复它。但是如果你想显示下面的元素,你最终需要使用 clear: both
。
关于html - 选择标签在特定屏幕尺寸上获取 "disabled",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28219879/