HTML响应

时间：2017-06-06 09:44:19

标签： html css twitter-bootstrap

这是我的HTML和CSS的结构：

＆＃13;
＆＃13; 
/* IMPORTS */


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

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

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

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

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

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

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

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

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

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

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


.update-data:last-child {
	border-bottom: none !important;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

现在我的问题是，当浏览器屏幕很小时，我如何将DIV updates-container （红色背景的那个）放在底部..

2 个答案:

答案 0 :(得分：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
}

溢出：隐藏可能是小屏幕上的问题，您可以使用媒体查询来解决此问题

答案 1 :(得分：0)

因为您使用了引导网格布局，所以您可以使用一些小技巧来实现您想要的效果。

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

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

  • lg用于大屏幕（≥1200px）
  • md适用于中等画面（≥992px）
  • sm用于小屏幕（≥576px）
  • xs用于额外的小屏幕（＆lt; 576px）

reference

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

＆＃13;
＆＃13; 
/* IMPORTS */


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

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

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

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

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

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

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

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

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

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

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


.update-data:last-child {
	border-bottom: none !important;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

通过添加lg, md, sm, xs细节，您可以更改每种screentype的视图。在这种情况下，我编辑了以下行：

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

在lg和md视图中，它将作为侧边栏。在sm视图中，它占据屏幕宽度的一半。在xs视图中，<div>内的每个updates-container都有一个完整的屏幕宽度。

希望这有帮助！

相关问题
最新问题