Fatal编程技术网

Twitter bootstrap 3 如何解决此引导程序兼容性问题

twitter-bootstrap-3

Twitter bootstrap 3 如何解决此引导程序兼容性问题,twitter-bootstrap-3,Twitter Bootstrap 3,我试着按照一个图像拼图的例子，它工作得很好，但一旦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="

我试着按照一个图像拼图的例子，它工作得很好，但一旦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>


图像拼图
图像拼图
剩余时间：





    
步骤：0
所用时间：秒
    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>

    
var时间函数；
var毫秒SALLOWED=30000；
var imagePuzzle={
步数：0，
开始时间：新日期（）.getTime（），
StartName：函数（图像、网格大小）{
console.log（gridSize）；
this.setImage（图像、网格大小）；
$（“#播放面板”）.show（）；
$（“#可排序”）.randomize（）；
这个.enableSwapping（'#sortable li'）；
此.stepCount=0；
this.startTime=new Date（）.getTime（）；
这个。勾选（）；
},
勾选：函数（）{
如果（毫秒延迟==0）{
clearTimeout（timerFunction）；
$（'#实现图像框'）.empty（）.html（$（'#gameLost'）.html（））；
$（“#可排序”）.empty（）；
返回；
}
var timeLeft=parseInt（（毫秒-1000））；
毫秒沙漏=毫秒沙漏-1000；
$（'#timeLeft'）.text（parseInt（timeLeft/1000））；
timerFunction=setTimeout（imagePuzzle.tick，1000）；
},
启用交换：功能（elem）{
$（元素）。可拖动({
捕捉：“#可拖放”，
snapMode:'外部'，
回复：“无效”，
助手：“克隆”
});
$（元素）。可拖放({
drop：函数（事件、用户界面）{
var$dragElem=$（ui.draggable.clone（）.replaceAll（此）；
$（this.replaceAll（ui.draggable）；
currentList=$（'#sortable>li'）.map（函数（i，el）{return$（el）.attr（'data-value'）；}）；
如果（已排序（当前列表））{
$（“#实现图像框”）.empty（）.html（$（“#gameOver”）.html（）；
$（“#可排序”）.empty（）；
clearTimeout（timerFunction）；
}否则{
var now=new Date（）.getTime（）；
imagePuzzle.stepCount++；
$（'.stepCount'）.text（imagePuzzle.stepCount）；
//$（'.timeCount'）.text（parseInt（（now-imagePuzzle.startTime）/1000,10）；
}
imagePuzzle.enableSwapping（此）；
imagePuzzle.enableSwapping（$dragElem）；
}
});
},
setImage:函数（图像、网格大小）{
console.log（gridSize）；
gridSize=gridSize | | 4；//如果gridSize为null或未传递，则默认为4。
console.log（gridSize）；
var百分比=100/（网格大小-1）；
var image=images[Math.floor（Math.random（）*images.length）]；
$（'#imgTitle'）.html（image.title）；
$（'#actualImage'）.attr（'src'，image.src）；
$（“#可排序”）.empty（）；
对于（变量i=0；i）.css({
“背景图像”：“url（'+image.src+'），
“背景大小”：（gridSize*100）+'%，
“背景位置”：xpos+“”+YPO，
“宽度”：400/网格大小，
“高度”：400/网格大小
});
$（“#可排序”）.append（li）；
}
$（“#可排序”）.randomize（）；
}
};
功能已排序（arr）{
对于（变量i=0；i
    通过将这一行添加到image-puzzle.css中解决了这个问题

    #playPanel * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
    请张贴您的标记，以便我们可以尝试并查看可能出现的问题。如果我们看不到您的代码来找出问题所在，就很难告诉您出了什么问题。我已经添加了脚本和标记。Thanks@MattD添加了代码如果引导引用导致其中断，请稍后尝试在文档标题中引入它，或者找出引导中的哪些项导致问题，然后自定义引导实现，使其不包含这些元素（如果可以避免）。否则你就得另找解决办法。