I am using Bootstrap to create a responsive web page. I need to add a padding-left and padding-right to the body to always have a 50px wide >empty safety area< on each side. Problem: When I resize the viewport, the content of container overflow on the right.
我正在使用Bootstrap来创建响应式网页。我需要在主体上添加一个填充左侧和填充右侧,每侧总是有一个50px宽>空的安全区域<。问题:当我调整视口大小时,容器溢出的内容就在右边。
Is there a simple way how to achieve this effect? I only tried the following one, but it doesn't look very good (the container is too narrow in the end).
有没有一种简单的方法来实现这种效果?我只尝试了下面的一个,但它看起来不太好(容器最后太窄了)。
// 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 structure:
<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/
1 个解决方案
#1
0
The text is not stretchy so it won't fit inside the header past a certain breakpoint. I usually use break word or just size the text down or use fitText.js. There's cleaner ways of doing this.
文本没有弹性,因此它不适合在某个断点之后的标题内。我通常使用break word或只是缩小文本大小或使用fitText.js。有更清洁的方法来做到这一点。
DEMO: 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;}
}
Also, see the layout you are going for, I wouldn't use the grid system for it. Here's a cleaner way.
另外,请参阅您要使用的布局,我不会使用网格系统。这是一种更清洁的方式。
http://jsbin.com/tuyeta/1/edit
#1
0
The text is not stretchy so it won't fit inside the header past a certain breakpoint. I usually use break word or just size the text down or use fitText.js. There's cleaner ways of doing this.
文本没有弹性,因此它不适合在某个断点之后的标题内。我通常使用break word或只是缩小文本大小或使用fitText.js。有更清洁的方法来做到这一点。
DEMO: 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;}
}
Also, see the layout you are going for, I wouldn't use the grid system for it. Here's a cleaner way.
另外,请参阅您要使用的布局,我不会使用网格系统。这是一种更清洁的方式。