Question

我试图效仿一个图像拼图的例子，但是一旦引用了twitter引导程序，网格就不再适用了。我在下面列出了标记和js。

HTML如下

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Image Puzzle</title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />

    <!--removing the bootstrap reference above makes it work-->

    <link href="css/style.css" rel="stylesheet" />
    <link href="css/image-puzzle.css" rel="stylesheet" />
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/image-puzzle.js"></script>
</head>
<body>
    <div id="collage">
        <h2>Image Puzzle</h2>
        <h3>TIME LEFT: <span id="timeLeft"></span></h3>
        <hr />
        <div id="playPanel" style="padding:5px!important;display:none!important;">
            <h3 id="imgTitle"></h3> <hr />
            <div style="display:inline-block!important; margin:auto!important; width:95%!important; vertical-align:top!important;">
                <ul id="sortable" class="sortable"></ul>
                <div id="actualImageBox">
                    <div id="stepBox">
                        <div>Steps:</div><div class="stepCount">0</div>
                    </div>
                    <div id="timeBox">
                        Time Taken: <span id="timerPanel"></span> secs
                    </div>
                    <img id="actualImage" />
                    <div>Re-arrange to create a picture like this.</div>
               </div>
            </div>
        </div>
        <div id="gameOver" style="display:none;">
            <div style="background-color:mediumspringgreen; padding: 5px 10px 20px 10px; text-align: center; ">
                <h2 style="text-align:center">Game Over!!</h2>
                <p>Congratulations!!  You won by <span class="stepCount">0</span> steps. </p>
                <br />
                <br />
                <div>
                    <label>Select Network Provider:</label>
                    <select>
                        <option value="AIRTEL">AIRTEL</option>
                        <option value="ETISALAT">ETISALAT</option>
                        <option value="GLO">GLO</option>
                        <option value="MTN">MTN</option>
                    </select>
                    <input type="text" placeholder="Enter your mobile number" maxlength="11" />
                    <button>Submit</button>
                    <hr />
                </div>
                <div>
                    <button type="button" onclick="window.location.reload(true);">Play Again</button>
                </div>
            </div>
        </div>
        <div id="gameLost" style="display:none;">
            <div style="background-color: Red; padding: 5px 10px 20px 10px; text-align: center; ">
                <h2 style="text-align:center">Game Over!!</h2>
                Sorry <br /> You Could not finish the game in the given time.
                <br />
                Steps: <span class="stepCount">0</span> steps.
                <br />
               <div>
                    <button type="button" onclick="window.location.reload(true);">Play Again</button>
                </div>
            </div>
        </div>

        <script>
            var images = [

                { src: 'images/Ada.jpg', title: 'Ada' },
                { src: 'images/Me2.jpg', title: 'Me 2' },
                { src: 'images/Me1.jpg', title: 'Me' }
            ];

            $(function () {
                var gridSize = $('#levelPanel :radio:checked').val();
                imagePuzzle.startGame(images, 3);
                $('#newPhoto').click(function () {
                    imagePuzzle.startGame(images, gridSize);
                });

                $('#levelPanel :radio').change(function (e) {
                    var gridSize = $(this).val();
                    imagePuzzle.startGame(images, gridSize);
                });
            });
      </script>
    </div>
</body>
</html>

Javascript如下，

    <code>
    var timerFunction;
    var millisecondsallowed = 30000;


    var imagePuzzle = {
        stepCount: 0,
        startTime: new Date().getTime(),
        startGame: function (images, gridSize) {
            console.log(gridSize);
            this.setImage(images, gridSize);
            $('#playPanel').show();
            $('#sortable').randomize();
            this.enableSwapping('#sortable li');
            this.stepCount = 0;
            this.startTime = new Date().getTime();
            this.tick();
        },
        tick: function () {

            if (millisecondsallowed == 0) {
                clearTimeout(timerFunction);
                $('#actualImageBox').empty().html($('#gameLost').html());
                $('#sortable').empty();

                return;
            }

            var timeLeft = parseInt((millisecondsallowed - 1000));
            millisecondsallowed = millisecondsallowed - 1000;
            $('#timeLeft').text(parseInt(timeLeft / 1000));
            timerFunction = setTimeout(imagePuzzle.tick, 1000);
        },
        enableSwapping: function (elem) {
            $(elem).draggable({
                snap: '#droppable',
                snapMode: 'outer',
                revert: "invalid",
                helper: "clone"
            });
            $(elem).droppable({
                drop: function (event, ui) {
                    var $dragElem = $(ui.draggable).clone().replaceAll(this);
                    $(this).replaceAll(ui.draggable);

                    currentList = $('#sortable > li').map(function (i, el) { return $(el).attr('data-value'); });
                    if (isSorted(currentList)) {
                        $('#actualImageBox').empty().html($('#gameOver').html());
                        $('#sortable').empty();

                        clearTimeout(timerFunction);
                    } else {
                        var now = new Date().getTime();
                        imagePuzzle.stepCount++;
                        $('.stepCount').text(imagePuzzle.stepCount);
                        //$('.timeCount').text(parseInt((now - imagePuzzle.startTime) / 1000, 10));
                    }

                    imagePuzzle.enableSwapping(this);
                    imagePuzzle.enableSwapping($dragElem);
                }
            });
        },

        setImage: function (images, gridSize) {
            console.log(gridSize);
            gridSize = gridSize || 4; // If gridSize is null or not passed, default it as 4.
            console.log(gridSize);
            var percentage = 100 / (gridSize - 1);
            var image = images[Math.floor(Math.random() * images.length)];
            $('#imgTitle').html(image.title);
            $('#actualImage').attr('src', image.src);
            $('#sortable').empty();
            for (var i = 0; i < gridSize * gridSize; i++) {
                var xpos = (percentage * (i % gridSize)) + '%';
                var ypos = (percentage * Math.floor(i / gridSize)) + '%';
                var li = $('<li class="item" data-value="' + (i) + '"></li>').css({
                    'background-image': 'url(' + image.src + ')',
                    'background-size': (gridSize * 100) + '%',
                    'background-position': xpos + ' ' + ypos,
                    'width': 400 / gridSize,
                    'height': 400 / gridSize
                });
                $('#sortable').append(li);
            }
            $('#sortable').randomize();
        }
    };

    function isSorted(arr) {
        for (var i = 0; i < arr.length - 1; i++) {
            if (arr[i] != i)
                return false;
        }
        return true;
    }
    $.fn.randomize = function (selector) {
        var $elems = selector ? $(this).find(selector) : $(this).children(),
            $parents = $elems.parent();

        $parents.each(function () {
            $(this).children(selector).sort(function () {
                return Math.round(Math.random()) - 0.5;
            }).remove().appendTo(this);
        });
        return this;
    };
    </code>

Answer 1

通过将此行添加到image-puzzle.css

解决了这个问题

#playPanel * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

如何解决此Bootstrap兼容性问题

1 个答案: