2017-06-06 99 views
1

这是我的HTML和CSS结构:HTML响应速度

/* IMPORTS */ 
 

 

 
/* COMMON STYLES */ 
 
html, body { 
 
\t margin: 0; 
 
\t height: 100%; 
 
\t overflow: hidden 
 
} 
 

 
h1, h2, h3, h4, h5, h6 { 
 
\t margin-top: 5px; 
 
\t margin-bottom: 5px; 
 
} 
 

 
/* PAGE STYLES */ 
 
#video-container { 
 
\t padding: 0; 
 
\t height: 100vh; 
 
} 
 

 
#video { 
 
\t background-color: #6d6; 
 
\t height: 65vh; 
 
} 
 

 
#tv { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t right: 15px; 
 
\t height: 50%; 
 
} 
 

 
#banner { 
 
\t height: 5vh; 
 
\t background-color: #fff; 
 
} 
 

 
#ctrl1, #ctrl2 { 
 
\t height: 30vh; 
 
} 
 

 
#ctrl1 { 
 
\t background-color: #66d; 
 
} 
 

 
#ctrl2 { 
 
\t background-color: #6dd; 
 
} 
 

 
#updates-container { 
 
\t padding: 0 15px; 
 
\t background-color: #d66; 
 
\t height: 100vh; 
 
\t overflow: auto; 
 
} 
 

 
.update-data { 
 
\t height: 35vh; 
 
\t border-bottom: dashed 1px #000; 
 
} 
 

 

 
.update-data:last-child { 
 
\t border-bottom: none !important; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <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> 
 

 
<div class="row"> 
 
    <!-- LEFT SIDE --> 
 
    <div id="video-container" class="col-xs-8 col-sm-8"> 
 
     <div class="row"> 
 
      <div id="video" class="col-xs-12 col-sm-12"> 
 
       <video autoplay loop id="tv"> 
 
        <source type="video/mp4" src="https://static.videezy.com/system/resources/previews/000/005/571/original/keyboard_02.mp4"> 
 
        <source type="application/ogg" src="https://static.videezy.com/system/resources/preview2s/000/005/571/original/keyboard_02.ogv"> 
 
        <source type="video/webm" src="https://static.videezy.com/system/resources/preview3s/000/005/571/original/keyboard_02.webm"> 
 
        Your browser does not support the video tag. 
 
       </video> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div id="banner" class="col-xs-12 col-sm-12 text-center">SAMPLE BANNER</div> 
 
     </div> 
 
     <div class="row"> 
 
      <div id="ctrl1" class="col-xs-6 col-sm-6"></div> 
 
      <div id="ctrl2" class="col-xs-6 col-sm-6"></div> 
 
     </div> 
 
    </div> 
 

 
    <!-- RIGHT SIDE --> 
 
    <div id="updates-container" class="col-xs-4 col-sm-4"> 
 
     <div class="update-data row"> 
 
      <div class="col-xs-12 col-sm-12"> 
 
       SAMPLE UPDATE 1 
 
      </div> 
 
     </div> 
 
     <div class="update-data row"> 
 
      <div class="col-xs-12 col-sm-12"> 
 
       SAMPLE UPDATE 2 
 
      </div> 
 
     </div> 
 
     <div class="update-data row"> 
 
      <div class="col-xs-12 col-sm-12"> 
 
       SAMPLE UPDATE 3 
 
      </div> 
 
     </div> 
 
     <div class="update-data row"> 
 
      <div class="col-xs-12 col-sm-12"> 
 
       SAMPLE UPDATE 4 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

现在我的问题是,如何将我的DIV updates-container(带有红色背景)定位当浏览器屏幕很小时...

+0

你可以在'.video-container'和'col-lg-4 col-md-4 col-xs上使用col-lg-8 col-md-8 col-xs-12 col-sm-12 -12 col-sm-12“替换为'.update-container',这样当它们到达'col-sm'时,它们都会占用所有的列。不幸的是,当我尝试它时,我看不到'.update-container' – Swellar

回答

1

更改

<!-- LEFT SIDE --> 
<div id="video-container" class="col-xs-8 col-sm-8"> 

<!-- LEFT SIDE --> 
<div id="video-container" class="col-xs-12 col-sm-8"> 

和:

<!-- RIGHT SIDE --> 
    <div id="updates-container" class="col-xs-4 col-sm-4"> 

<!-- RIGHT SIDE --> 
    <div id="updates-container" class="col-xs-12 col-sm-4"> 

此外,

html, body { 
    margin: 0; 
    height: 100%; 
    overflow: hidden 
} 

溢出:隐藏可能是小屏幕上的问题,您可以使用媒体查询来修复此问题

0

由于您使用引导网格布局,因此您可以使用一些小技巧来实现您想要的。

正如您所知,bootstrap在一个row上使用了12列。所以如果我们想要创建一个全宽度块,我们将使用col-12

lg, md, sm, xs指的是屏幕的宽度。

  • lg用于大屏幕(≥1200像素)
  • md为介质屏幕(≥992px)
  • sm为小屏幕(≥576px)
  • xs额外小屏幕(< 576px)

reference

您希望红色区域位于小设备上的full-width<row>上。请参见下面的工作示例:

/* IMPORTS */ 
 

 

 
/* COMMON STYLES */ 
 
html, body { 
 
\t margin: 0; 
 
\t height: 100%; 
 
\t overflow: hidden 
 
} 
 

 
h1, h2, h3, h4, h5, h6 { 
 
\t margin-top: 5px; 
 
\t margin-bottom: 5px; 
 
} 
 

 
/* PAGE STYLES */ 
 
#video-container { 
 
\t padding: 0; 
 
\t height: 100vh; 
 
} 
 

 
#video { 
 
\t background-color: #6d6; 
 
\t height: 65vh; 
 
} 
 

 
#tv { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t right: 15px; 
 
\t height: 50%; 
 
} 
 

 
#banner { 
 
\t height: 5vh; 
 
\t background-color: #fff; 
 
} 
 

 
#ctrl1, #ctrl2 { 
 
\t height: 30vh; 
 
} 
 

 
#ctrl1 { 
 
\t background-color: #66d; 
 
} 
 

 
#ctrl2 { 
 
\t background-color: #6dd; 
 
} 
 

 
#updates-container { 
 
\t padding: 0 15px; 
 
\t background-color: #d66; 
 
\t height: 100vh; 
 
\t overflow: auto; 
 
} 
 

 
.update-data { 
 
\t height: 35vh; 
 
\t border-bottom: dashed 1px #000; 
 
} 
 

 

 
.update-data:last-child { 
 
\t border-bottom: none !important; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <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> 
 

 
<div class="row"> 
 
    <!-- LEFT SIDE --> 
 
    <div id="video-container" class="col-xs-8 col-sm-8"> 
 
     <div class="row"> 
 
      <div id="video" class="col-xs-12 col-sm-12"> 
 
       <video autoplay loop id="tv"> 
 
        <source type="video/mp4" src="https://static.videezy.com/system/resources/previews/000/005/571/original/keyboard_02.mp4"> 
 
        <source type="application/ogg" src="https://static.videezy.com/system/resources/preview2s/000/005/571/original/keyboard_02.ogv"> 
 
        <source type="video/webm" src="https://static.videezy.com/system/resources/preview3s/000/005/571/original/keyboard_02.webm"> 
 
        Your browser does not support the video tag. 
 
       </video> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div id="banner" class="col-xs-12 col-sm-12 text-center">SAMPLE BANNER</div> 
 
     </div> 
 
     <div class="row"> 
 
      <div id="ctrl1" class="col-xs-6 col-sm-6"></div> 
 
      <div id="ctrl2" class="col-xs-6 col-sm-6"></div> 
 
     </div> 
 
    </div> 
 

 
    <!-- RIGHT SIDE --> 
 
    <div id="updates-container" class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
 
     <div class="update-data row"> 
 
      <div class="col-xs-12 col-sm-12"> 
 
       SAMPLE UPDATE 1 
 
      </div> 
 
     </div> 
 
     <div class="update-data row"> 
 
      <div class="col-xs-12 col-sm-12"> 
 
       SAMPLE UPDATE 2 
 
      </div> 
 
     </div> 
 
     <div class="update-data row"> 
 
      <div class="col-xs-12 col-sm-12"> 
 
       SAMPLE UPDATE 3 
 
      </div> 
 
     </div> 
 
     <div class="update-data row"> 
 
      <div class="col-xs-12 col-sm-12"> 
 
       SAMPLE UPDATE 4 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

通过添加lg, md, sm, xs细节你能够改变每个screentype的看法。在这种情况下,我已经编辑下面一行:

<div id="updates-container" class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 

lgmd观点它将作为一个侧边栏。在sm视图上它将占用屏幕宽度的一半。在xs视图中,每个<div>里面的updates-container都会有一个全宽的屏幕。

希望这会有所帮助!