2017-10-14 77 views
0

我使用HTML,CSS和Bootstrap創建了簡單的HTML代碼。我用col-md-4col-md-8分了一排。調整窗口大小時,col-md-8的背景圖像會向下移位。當在Bootstrap中調整窗口大小時停止元素移動

我附加了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背景圖像從得到下移?

回答

相關問題