Question

我有一个新奇怪的html / bootstrap / jquery问题......当屏幕有一定的宽度（超过导航切换宽度，但小于正常宽度）时，所有选择框都会被“禁用”。< / p>

检查我的jsFiddle here。请注意，然后在宽屏幕上它可以完美地工作，但是在中等的sies上它没有显示，而小的它再次很好用。

真的不知道如何搜索这个问题，但我所做的搜索没有回复任何问题。希望你们有一个线索......

我已经测试了最新的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”按钮显示为块元素并覆盖左侧的浮动元素（因此您无法单击它们）。将其样式从text-align: right更改为float: right可以解决问题。但是如果你想显示下面的元素，你最终需要使用clear: both。

选择标记获取＆＃34;禁用＆＃34;在一定的屏幕尺寸上

1 个答案: