html - div 内的 col-sm，一侧有边距

Question

我是网页设计的新手，我一直在寻找这个问题的答案，但找不到。

所以我想在页面的一侧添加一个固定的垂直导航栏，所以我用#everything 包裹了整个页面并添加了 50 像素的左边距，这样就有足够的空间来制作导航栏。但是，当我这样做时，文本不适合其父级的宽度。它似乎根据页面大小而不是其容器的大小调整大小。

我该怎么做才能使文本不会溢出，而是适应其容器的大小？

#everything{
margin-left:50px;
}

        <div id='everything'>   

        <div class='row'>
            <div class='col-sm-6'>
              <p>text long enough to make a paragraph</p>
              <p>text long enough to make a paragraph</p>
            </div>
            <div class='col-sm-6'>
              <p>text long enough to make a paragraph</p>
              <p>text long enough to make a paragraph</p>         
            </div>
          </div>
       
       </div>

所以我开始使用 bootstrap 并做了这个，所以我的页面上有响应段落。我想在页面的一侧添加一个固定的导航栏，所以我用#all id 包裹了整个页面

Answer 1

也许是你正在寻找的东西

#bar {
  width: 50px;
  float:left;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div id="bar">
    aaaa
  </div>
  <div id='everything'>   

    <div class='row'>
      <div class='col-sm-6'>
        <p>text long enough to make a paragraph</p>
        <p>text long enough to make a paragraph</p>
      </div>
      <div class='col-sm-6'>
        <p>text long enough to make a paragraph</p>
        <p>text long enough to make a paragraph</p>         
      </div>
    </div>

  </div>
  
</div>