html - 选择标签在特定屏幕尺寸上获取 "disabled"

Question

我有一个新的奇怪的 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>&nbsp;&nbsp;27.02.2014 - 23:31&nbsp;
            </div>
            &nbsp;&nbsp;
            <div class="text-right" style="display: inline-block; font-size: 0.8em;">
                <i class="fa fa-phone"></i>&nbsp;40055206&nbsp;
            </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">
            &nbsp;&nbsp;&nbsp;
        </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&amp;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&amp;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>

Answer 1

“Lagre oppdatering”按钮显示为 block 元素并覆盖左侧的 float 元素(因此您无法单击它们)。将其样式从 text-align: right 更改为 float: right 修复它。但是如果你想显示下面的元素，你最终需要使用 clear: both。