我的网站在我的本地计算机上按照我喜欢的方式运行，但是当我在其他计算机上查看它时，幻灯片中的图像以各种不同的尺寸呈现。它在我的电脑上运行良好，但我在排除代码故障时遇到问题，因为我在本地环境中看不到问题。有没有人对如何解决您在本地计算机上看不到的前端问题有建议？我通过 W3C 验证器运行代码，但我感到不知所措，但它是输出。任何指导将不胜感激! (抱歉所有内联的东西，我正在帮助一个在 Dreamweaver 中工作的 friend ，并被要求以这种方式离开。)
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Full Slider - Start Bootstrap Template</title>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Modernizer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<!-- Focuspoint -->
<script type="text/javascript" src="js/jquery.focuspoint.js"></script>
<link rel="stylesheet" href="css/focuspoint.css">
<!-- bx slider -->
<script src="js/plugins/jquery.fitvids.js"></script>
<script src="js/jquery.bxslider.js"></script>
<link href="css/jquery.bxslider.css" rel="stylesheet">
<script type="text/javascript">
//<![CDATA[
(function($) {
$(document).ready(function() {
//Fire plugin
$('.focuspoint').focusPoint();
$('.bxslider').bxSlider({
video: true,
useCSS: false,
controls: true
});
});
}(jQuery));
//]]>
</script>
<style type="text/css">
.navbar.transparent.navbar-inverse .navbar-inner {
background: rgba(0,0,0,0.4);
font-color: #000;
}
.navbar-nav > li{
margin-left:-10px;
margin-right:-10px;
}
.icon-bar {
background-color:#FFF !important;
}
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: underline;
color: #FFC;
}
.nav>li>a:focus, .nav>li>a:hover {
background-color: transparent;
}
body
{
background-image: url(Images/Dust_Background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-color: black;
background-attachment: fixed;
}
.bg
{
width: 100%;
z-index: 0;
}
a {
color: #FFC;
text-decoration: none;
}
a.pull-left {
width: 25%;
margin-top: 10px;
}
.navbar-collapse{
border-top:0px !important;
box-shadow:none;
}
body,td,th {
font-family: "Tw Cen MT", Helvetica, "MS Reference Sans Serif";
font-size: 16px;
color: #FFF;
}
a:link {
text-decoration: none;
color: #FFF;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #FFC;
}
a:active {
text-decoration: none;
}
@media (max-width: @screen-xs) {
body{font-size: 10px;}
}
@media (max-width: @screen-sm) {
body{font-size: 14px;}
}
#style_text {
text-align: justify;
letter-spacing: .8px;
font-weight: 100;
}
#style_text p {
padding: 10px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.bx-wrapper .bx-viewport {
border: none;
-webkit-box-shadow: none;
background: transparent;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: rgba(255, 255, 255, 0.25)
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
background: rgba(255, 255, 255, 0.65);
}
.bx-wrapper .bx-loading {
background: black;
}
</style>
<body>
<!-- Navigation -->
<nav class="navbar navbar-transparent navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="test">
<a href="index_vs3.html" class="pull-left"><img src="Images/kairos_logo.png" style="
width: 250%;"></a>
</div>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="film_vs7.html">THE FILM</a></li>
<li><a href="screenings.html">SCREENINGS</a></li>
<li><a href="contact_vs3.html">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
<ul class="bxslider">
<li>
<iframe src="http://player.vimeo.com/video/131032179" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li><img src="Images/EbelKitchen.jpg" /></li>
<li><img src="Images/LightningHole.jpg" /></li>
<li><img src="Images/CharlesAlex.jpg" /></li>
<li><img src="Images/Edna_JoeysRoom.jpg" /></li>
<li><img src="Images/neoncross.jpg"/></li>
<li><img src="Images/overpass.jpg"/></li>
<li><img src="Images/TJRosieTrainWalk.jpg" /></li>
</ul>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-l">
<div id="style_text">
<p>
Through a series of collective dreams an other worldly being invades the characters' dream spaces, revealing their carnivorous desires and subconscious underbellies. Relationships intertwine in unusual and fantastical landscapes as television monitors, radio frequencies, orifices and dreams all become portals to access this alternate dimension of carnality and desire.</p>
<p>
The characters are forced to ask what is self? What is other? What must we give up to become something else?</p>
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
看起来您需要为图像添加高度/宽度，否则它们将以各自的尺寸显示。
关于javascript - bootstrap 轮播不同尺寸，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40229447/