我正在使用 Bootstrap 创建响应式网页。我需要添加一个 padding-left 和 padding-right 到 body 以在每一侧始终有一个 50px 宽的>空白安全区域<。 问题:当我调整视口(viewport)大小时,容器的内容在右侧溢出。
有没有一种简单的方法可以实现这种效果?只试了下面这个,感觉不太好(最后容器太窄了)。
// container responsivity fix
.container {
.container-fixed();
@media (min-width: @screen-sm-min) {
width: calc(~'@{container-sm} - 100px');
}
@media (min-width: @screen-md-min) {
width: calc(~'@{container-md} - 80px');
}
@media (min-width: @screen-lg-min) {
width: calc(~'@{container-lg} - 100px');
}
}
HTML 结构:
<header>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<a href="#">
LOGO
</a>
</div>
<div class="col-xs-12 col-sm-5">
<h2>Lorem ipsum dolor sit amet, <strong> consectetur adipiscing elit.</strong> </h2>
</div>
<div class="col-xs-12 col-sm-3 text-right">
<i class="flag cz active">A</i>
<i class="flag uk">B</i>
<i class="flag ge">C</i>
</div>
</div>
</div>
</header>
fiddle :http://jsfiddle.net/o5bkpv7c/
最佳答案
文本没有 flex ,因此超过某个断点后将无法容纳在页眉内。我通常使用中断词或只是缩小文本大小或使用 fitText.js。有更简洁的方法可以做到这一点。
演示:http://jsfiddle.net/o5bkpv7c/4/
body {
padding: 0 20px;
}
header {
background: lightblue;
padding: 1em 0;
}
header h2 {font-size:1.2rem;margin:10px 0;}
.flag {
width: 29px;
height: 20px;
display: inline-block;
background: red;
}
@media (min-width:768px) {
header h2 {font-size:1.3rem;margin:0;}
}
此外,请查看您要使用的布局,我不会为此使用网格系统。这是一种更简洁的方法。
http://jsbin.com/tuyeta/1/edit
关于css - Bootstrap 和 body padding 左右,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25365116/