Boostrap旋轉木馬不同尺寸

Question

我的網站可以在我的本地計算機上運行，但是當我在其他計算機上查看該幻燈片時，幻燈片中的圖像正以所有不同的大小顯示。 它可以很好地在我的計算機上運行，但是由於無法在本地環境中看到問題，因此我無法對代碼進行故障排除。 有人對如何解決本地計算機上看不到的前端問題有任何建議嗎？ 我通過W3C驗證器運行了代碼，但是我感到不知所措，但是它是輸出。 任何指導將不勝感激！ （很抱歉，所有內聯的東西，我正在幫助一個在Dreamweaver中工作並且被要求離開的朋友。）

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

Answer 1

看起來您需要為圖像添加高度/寬度，否則它們將以各自的尺寸顯示。

Boostrap旋轉木馬不同尺寸

問題描述

1 個解決方案

解決方案1
0 2016-10-25 00:16:50

Boostrap旋轉木馬不同尺寸

問題描述

1 個解決方案

解決方案1 0 2016-10-25 00:16:50

解決方案1
0 2016-10-25 00:16:50