我想将图片与滑块的极端对齐,我确实尝试了边距左侧,但它在屏幕的所有尺寸中都无法工作。我也想使其响应迅速,以便图片在屏幕的所有尺寸中保持最左侧。请帮忙。以下是滑块的代码。
/********************************/
/* Slides backgrounds */
/********************************/
#first-slider .slide1 {
background-color: blue;
background-size: cover;
background-repeat: no-repeat;
}
/********************************/
/* Media Queries */
/********************************/
@media screen and (min-width: 980px){
}
@media screen and (max-width: 640px){
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,500" rel="stylesheet">
</head>
<body><div id="first-slider">
<div id="carousel-example-generic" class="carousel slide carousel-fade">
<div class="carousel-inner" role="listbox">
<div class="item active slide1">
<div class="row"><div class="container">
<div class="col-md-7 text-left">
<a style="background-color: #272a2e; font-weight: 500; font-size: 14px; border: black; " href="#" class="btn btn-info btn-lg da-link">
IP CAMERAS </a>
</div>
<div class="col-md-5 text-right">
<img style="" width="100%" height="100%" data-animation="animated zoomInLeft" src="http://grandstream.com.pk/img/cam.png">
</div>
</div></div>
</div>
<!-- Item 3 -->
</div>
<!-- End Wrapper for slides-->
</div>
</div></body>
</html>
margin-left
将在元素的左侧创建一个空间,但是除非值是可变的(如95VW),否则位置不会响应。
您应该使用position
或float
来实现所需的效果,具体取决于您想要的一侧(您说明了极端右,然后是最左侧)。
例如:
<style>
.carousel {
position: relative; }
.slide {
position: absolute;
right: 0; } // or left
</style>
或
<style>
.slide {
float: right; } // or left
</style>
我会注意到,如果您使用的是旋转木马的jQuery插件,则可能会有jQuery的样式或注入样式会影响幻灯片的位置。