左右引导和身体填充

Question

我使用Bootstrap创建响应式网页。我需要在主体处添加填充左侧和填充右侧，以始终具有50px宽的＆gt;空安全区域＆lt;在每一边。 问题：当我调整视口大小时，容器溢出的内容就在右边。

有一种简单的方法来实现这种效果吗？我只尝试了下面的一个，但它看起来不太好（容器最后太窄）。

// 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>

小提琴：http://jsfiddle.net/o5bkpv7c/

Answer 1

文本没有弹性，因此它不会适合超过某个断点的标题内部。我通常使用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;}

}

另外，请参阅您要使用的布局，我不会使用网格系统。这是一种更清洁的方式。

http://jsbin.com/tuyeta/1/edit