Bootstrap中定位的具体方式

假设我有两个div，其中有一行“row”，而且我希望第二个div始终位于div的最底部，并带有一个“section”类（bottom：0 ）。Bootstrap中定位的具体方式

下面是代码来说明它更好地：

<div class="section"> 
    <div class="row"></div> 
    <div class="row"></div> 
</div>

与类“一节”的DIV有100vh 高度第一行的需要屏幕的高度约70％，我想第二行始终位于页面的底部，但也不会干扰屏幕高度变小时第一行的内容。我如何设法定位这些div？

来源

2016-05-13 Maciej S.

预计您至少会尝试为自己编写代码。堆栈溢出不是代码写入服务。我建议你做一些额外的研究，无论是通过谷歌或通过搜索，做一个尝试和。如果您仍然遇到麻烦，请返回**您的代码**并解释您尝试过的以及为什么它不起作用。 –

bootstrap是一个行布局框架和垂直对齐的东西，你将不得不写CSS与引导无关.. –

你在这里。如果内容大于视口的高度，则向第一行添加内容会将第二行向下推。在非常小的屏幕上，您会像平常一样获得垂直的滚动条。

http://codepen.io/dherran/pen/KzYqmW

body, html { 
 
    min-height: 100%; 
 
} 
 

 
.section { 
 
    height: 100vh; 
 
} 
 

 
.row:first-child { 
 
    background: black; 
 
    color: white; 
 
    min-height: calc(100% - 40px); 
 
} 
 

 
.row:nth-child(2) { 
 
    background: blue; 
 
    height: 40px; 
 
}

<div class="section"> 
 
    <div class="row"></div> 
 
    <div class="row"></div> 
 
</div>

我会避免使用第n（）选择这个。改用类。这些选择器的使用仅用于说明目的。

来源

2016-05-13 17:54:12

谢谢。我认为这是我想要做的。 –

Bootstrap中定位的具体方式

回答

相关问题