javascript - Bootstrap 搞乱了未定义的 div

我最近开始用 HTML、CSS 和 jQuery 制作一个杂耍。

然后我继续在幻灯片下创建了一个交互式页面，我不想花太多时间定位我的 div，所以我使用 bootstrap 来做到这一点，但问题就来了，当我开始加载 Bootstrap ，我的杂耍，我的标题稍微向右移动。现在我可以通过执行减号 margin-left 来解决这个问题，但是当我调整窗口大小时，间隙大小发生了变化。

这就是我的问题，这是我的 HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Firma - Ølnavn</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
</head>

<body>
    <div id="wrapper">

        <div id="content" class="container">
            <div id="header">
                <p id="headertitle">Øl</p>
                <p id="headertext">ded</p>
                <p id="headertext">edeed</p>
                <p id="headertext">edededed</p>
            </div>
            <!--<div id="cornfield"></div>-->
            <div id="slider" class="">
                <ul class="slides">
                    <li class="slide slide1">slide1</li>
                    <li class="slide slide2">slide2</li>
                    <li class="slide slide3">slide3</li>
                    <li class="slide slide4">slide4</li>
                </ul>
            </div>
            <a href="#DESCRIPTION"><div id="beer"></div></a>
        </div>
        <div id="footer"><p>TUBORG<stroke> - </stroke>PILSNER</p></div>
    </div>
    <div id="DESCRIPTION">
        <div id="firstbox">
            <div id="beertitle">
                <div id="beertitle1" class="col-sm-4 beertitle"><h2>Den Nye</h2></div>
                <div id="beertitle2" class="col-sm-4 beertitle"><h2>Den Populære</h2></div>
                <div id="beertitle3" class="col-sm-4 beertitle"><h2>Den Første</h2></div>
            </div>
            <div id="beer1">
                <img id="beerdesciption1" class="" src="Beer_S.png">
                <div id="beerdesciption2" class="col-sm-4">Dette er vores nyeste øl, brygget i eget bryghus...</div>
                <div id="beerdesciption3" class="col-sm-4">Beskrivelse 2 side 1</div>
            </div>
            <div id="beer2">
                <img id="beerdesciption1" class="" src="Beer_S.png">
                <div id="beerdesciption2" class="col-sm-4">Vores mest populære æl blah blah blah</div>
                <div id="beerdesciption3" class="col-sm-4">Beskrivelse 2 side 2</div>
            </div>
            <div id="beer3">
                <img id="beerdesciption1" class="" src="Beer_S.png">
                <div id="beerdesciption2" class="col-sm-4">Den første øl vi lavede var en god, blah blah blah...</div>
                <div id="beerdesciption3" class="col-sm-4">Beskrivelse 2 side 3</div>
            </div>
        </div>
        <div id="secondbox">
            <div id="text">
                <h1>Om os</h1>
                <p>Vi er et nystartet bryghus, blah blah blah...</p>
            </div>
        </div>
        <div id="thirdbox">
            <div id="text">
                <h1>Kontakt</h1>
                <p>Blah Blah Blah</p>
            </div>
        </div>
    </div>
    <!--Remember to load core as the first fucking script!!!!!-->
    <!--CORE-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!--my script-->
    <script type="text/javascript" src="showhide.js"></script>
    <script type="text/javascript" src="script_beer.js"></script>
    <script type="text/javascript" src="script_cornfield.js"></script>
    <script type="text/javascript" src="slider.js"></script>
</body>
</html>

我的CSS:

* {
        /*border: 2px dotted black;*/
}
html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
    overflow: hidden;
}
#header {
    font-family: monospace;
    font-size: 24px;
    padding: 38px;
    color: white;
    height: 100px;
    width: 100%;

    /*margin-top: -100px;*/
    background-color: lightgray;
    position: fixed;
}
#headertitle {
    text-align: left;
        display: inline;
}
#headertext {
    text-align: right;
        display: inline;
}
#slider {
    margin-top: 100px;
    overflow: hidden;
    height: 600px;
    width: 1920px;
    z-index: 1;
}
#slider .slides {
    display: block;
    width: 7680px;
    margin: 0;
    padding: 0;
}
#slider .slide {
    float: left;
    list-style-type: none;
    width: 1920px;
    height: 600px;
}
.slide1 {
    /*background: url(Cornfield.jpg) no-repeat;*/
    background: blue;
    height: 600px;
}
.slide2 {
    /*background: url(moens-klint.jpg) no-repeat;*/
    background: red;
    z-index: 500;
}
.slide3 {
    background: green;
}
.slide4 {
    /*background: url(Cornfield.jpg) no-repeat;*/
    background: blue;
    height: 600px;
}
#beer{
    background: url(Beer_S.png) no-repeat;
    margin-top: -519px;
    margin-left: auto;
    margin-right: auto;
    z-index: 999;
   /* margin-left: -67.5px;
    left: 50%;*/
    height: 438px;
    width: 135px;
    opacity: 0.7;
    /* -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */ 
    /*animation: mymove 5s infinite;*/
}
p stroke {
    font-family: monospace;
}
#footer p{
    /*border-top: 1px solid green;
    border-bottom: 1px solid green;*/
    display:block;
    font-family: serif;
    text-align: center;
    font-size: 3em;
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
}
#DESCRIPTION {
}
#firstbox {
    text-align: center;
    background-color: lightgray;
}
/*.beertitle {
    display: inline-block;
    padding: 30px;
}*/
#beerdesciption1 {
    height: 438;
    width: 135;
}
#text {
    text-align: right;
}
#thirdbox{
    background: url(korn.jpg) no-repeat;
    overflow: hidden;
    with: 1080px;
    height: 600px;

}

我的 jQuery showhide.js:

'use strict';

$(document).ready(function () {
    $("#beer2").hide();
    $("#beer3").hide();
    $("#beertitle1").click(function(){
        $("#beer1").show();
        $("#beer2").hide();
        $("#beer3").hide();
    });
    $("#beertitle2").click(function(){
        $("#beer1").hide();
        $("#beer2").show();
        $("#beer3").hide();
    });
    $("#beertitle3").click(function(){
        $("#beer1").hide();
        $("#beer2").hide();
        $("#beer3").show();
    });
    //$("#show").click(function(){
    //    $("p").show();
    //});
});

我的 jQuery script_beer.js:

'use strict';

//beer opacity function
$(document).ready(function () {
    $('#beer').mouseover(function () {
        $(this).stop(true).animate({opacity: 0.9}, 800);
    });
    $('#beer').mouseout(function () {
        $(this).stop(true).animate({opacity: 0.6}, 800);
    });
});

我的 jQuery slider.js:

'use strict';

$(function() {

    //settings for slider
    var width = 1920;
    var animationSpeed = 1500;
    var pause = 3500;
    var currentSlide = 1;

    //cache DOM elements
    var $slider = $('#slider');
    var $slideContainer = $slider.find('.slides');
    var $slides = $slideContainer.find('.slide');

    //slider function
    var interval;

    function startSlider() {
        interval = setInterval(function () {
            $slideContainer.animate({'margin-left': '-=' +width}, animationSpeed, function () {
                currentSlide++;
                if (currentSlide === $slides.length) {
                    currentSlide = 1;
                    $slideContainer.css('margin-left', 0);
                }
            });
        }, pause);
    }
    // pause slider function
    function pauseSlider() {
        clearInterval(interval);
    }

    $slideContainer
        .on('mouseenter', pauseSlider)
        .on('mouseleave', startSlider);

    startSlider();


});

JSfiddle:https://jsfiddle.net/royrz6mL/

最佳答案

希望这可以帮助你。

.container
{
    padding: 0;
}

Jsfiddle

关于javascript - Bootstrap 搞乱了未定义的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33775328/

javascript - Bootstrap 搞乱了未定义的 div

上一篇：javascript - jquery show hide div 但 onchange 记住它

下一篇：javascript - 代码点火器 : Show methods name as per controller name selected