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 - file ::

.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 个答案: