15

こんにちは、私はこの問題を解決するネット上で何かを見つけられなかったので、これについて助けを得ることができるかどうか知りたい.ボックス。

使用したコード

    <div class="modal hide" id="electricityModal">

        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Submit A Electricity Reading</h3>
        </div>

        <div class="modal-body">

            <div class="control-group">
                <label class="control-label">Date/Time</label>
                    <div class="controls">
                        <span class="input-medium uneditable-input">22 Aug 2012, 9:45AM</span>
                    </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="reading-peak">Peak</label>
                <div class="controls">
                    <input style="letter-spacing: 10px;" type="text" id="reading-peak" class="input-medium">
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="reading-off-peak">Off Peak</label>
                <div class="controls">
                    <input style="letter-spacing: 10px;" type="text" id="reading-off-peak" class="input-medium">
                </div>
            </div>

        </div>

        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Lodge Reading</button>
        </div>
    </div>
4

2 に答える 2

23

これを修正するには、次の css を追加します (bootstraps github issues にあります)。

    @media (max-width: 480px) {

        .modal {
            height: 500px; /* Set a default max height of the modal (adjusted later)*/
            position: fixed; /* Display modal in the centre of your screen */
            overflow-y: scroll; /*  Ensure that the modal is scroll-able */
            -webkit-overflow-scrolling: touch; /* Avoid having to use 2 finger scroll on iOS    */
        }
        .modal.fade.in{
            top: 5px; /* Use more screen real estate */
        }
        .modal-body{
            /* Increase the max height of the modal body to try & avoid both it,
             * and the modal container having scroll bars which results in odd behavior */ 
            max-height: 2400px; 
        }   
    }

    /* Now adjust the height so it handles various screen sizes & orientations */
    /* You could make this as granular as you like, or have it more granular at common screen sizes
     * but it should start at the height we set on .modal (i.e. 500px) & work down */
    @media (max-width: 480px) and (max-height: 500px){.modal{ height: 450px}}
    @media (max-width: 480px) and (max-height: 450px){.modal{ height: 400px}}
    @media (max-width: 480px) and (max-height: 400px){.modal{ height: 350px}}
    @media (max-width: 480px) and (max-height: 350px){.modal{ height: 300px}}
    @media (max-width: 480px) and (max-height: 300px){.modal{ height: 250px}}
    @media (max-width: 480px) and (max-height: 250px){.modal{ height: 200px}}
    @media (max-width: 480px) and (max-height: 200px){.modal{ height: 150px}}
于 2012-08-23T04:06:21.657 に答える
0

親 div (id:electricityModal)にmax-heightcss プロパティを指定すると、スクロール バーが表示されて役立つと思います。最適な高さをお選びください。250px のように言います。

于 2012-08-22T16:52:30.153 に答える