在Bootstrap中調整窗口大小時，停止元素移動

Question

我使用HTML，CSS和Bootstrap創建了簡單的HTML代碼。 我使用col-md-4和col-md-8划分了一行。 當我調整窗口大小時， col-md-8的背景圖像會下移。

我已經附上了HTML和CSS文件中的代碼。

<html>
<head>
<title> Bootstrap Practice </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="tp.css" rel="stylesheet" type="text/css"/>
</head>
<body background = "red">
<div class = "container-fluid">
    <div class = "row" >
        <div  class="col-md-4 col-sx-4 col-lg-4 nopadding" style="height:100%; ">
            <p style="align:middle">  This  is  first column bg </p>
        </div>
        <div class="col-md-8 col-sx-8 col-lg-8 shutterstock_227863141 nopadding" style="height:100%; ">
            <p>  This  is  second column </p>
        </div>
    </div> 
</div>
</body>
</html>

CSS-文件::

.shutterstock_227863141{
width: 60%;
height: 500px; 
background-image: url(Learning_fun.jpg);
background-repeat: no-repeat;
background-size: cover;
background-color: #464646;
}

.nopadding{
margin : 0 !important;
padding : 0 !important;
}

如何防止col-md-8的背景圖像向下偏移？

Answer 1

Bootstrap網格系統有四個類：

xs（用於手機）sm（用於平板電腦）md（用於台式機）lg（用於大型台式機）

您的代碼不起作用，因為它沒有col-sm-*並且您拼寫了col-xs-* 。

您可以在這里了解更多信息https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

在Bootstrap中調整窗口大小時，停止元素移動

問題描述

1 個解決方案

解決方案1
0 已采納 2017-10-14 15:59:10

在Bootstrap中調整窗口大小時，停止元素移動

問題描述

1 個解決方案

解決方案1 0 已采納 2017-10-14 15:59:10

解決方案1
0 已采納 2017-10-14 15:59:10