Fatal编程技术网
  • html/
  • Html 使用引导禁用div（带背景图像）

Html 使用引导禁用div（带背景图像）

html css twitter-bootstrap

Html 使用引导禁用div（带背景图像）,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在使用引导，我想在调整web浏览器窗口的大小时禁用div的大小调整。我之所以要这样做，是因为我在这个div中有一个div（用于拖放），所以每次调整窗口大小时，第二个div都会改变它在背景上的位置。 问题发生在id=1的div中，我希望它有一个固定的大小，因此每次我调整浏览器的大小时，它都保持相同的大小，允许其中的div不改变它的位置 <body> <div class="container"> <nav class="navbar navbar-expa

我正在使用引导，我想在调整web浏览器窗口的大小时禁用div的大小调整。我之所以要这样做，是因为我在这个div中有一个div（用于拖放），所以每次调整窗口大小时，第二个div都会改变它在背景上的位置。 问题发生在id=1的div中，我希望它有一个固定的大小，因此每次我调整浏览器的大小时，它都保持相同的大小，允许其中的div不改变它的位置

<body>
<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="index.html">Index</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="home.html">home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="building.html">Building</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="truck.html">Truck</a>
                </li>
            </ul>
        </div>
    </nav>

    <div>
        <div class="myNewDivHeight2">
            <img id="drag1" src="images/truck.png" draggable="true" ondragstart="drag(event)">
        </div>
        <br>
        <br>
        <div class="bgimg myNewDivHeight" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div class="hsonuc">DIV</div>
        </div>
    </div>


    <hr class="featurette-divider">
</div>


<script src="js/JS_casa.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
    crossorigin="anonymous"></script>
这是调整大小时的外观：

编辑：添加更多的代码

仅仅用这些代码是很难理解的。我只是添加了更多的代码。 
@media screen and (min-width: 500px) { //this is to allways show the background image of the div
.myNewDivHeight{
    min-height: 390px;
    }
}

.hsonuc {
position:absolute;
background-color: white;
top:72%;
right:50%;
margin-right:200px;
}