Question

我正在创建一个页面，其左侧为col-3，右侧为col-9，col-3和jumbotron中分别带有导航，以及col-9中的文本，但是由于某种原因，页面太宽，需要滚动条才能浏览页面的整个宽度。

除了谷歌搜索外，没有做过很多尝试，但是没有产生任何结果。

    <div class = "row">
      <div class = "col-sm-3">

      </div><!--closing of left column-->

  <div class = "col-sm-9">
    <div class = "container">
      <div class = "row">
        <div class = "col-sm-12 text-center">
          <div class = "row text-center">
            <h1>Oregon Tulip Festival</h1>
          </div>
  <div class = "jumbotron img-responsive">
  <div class = "container">
  <div class = "row">
  <div class = "col-sm-12">
  <p class = "jumbo">Sunset at the Tulip Festival</p>
        </div>
    </div>
          </div>
        </div><!--closing of jumbotron-->
<hr>
<h2>Tulip festival | Experience Oregon's finest tulip arrangement</h2>
</div>
    </div><!--closing of small container-->

  </div><!--closing of right column-->
</div>
</div><!--closing of large container-->
</div>```

I have all the divs closed off, so I don't really know how to eliminate the unnecessary width. Could it possibly be my jumbotron?

Answer 1

此布局不需要多次使用容器，请尝试以下HTML结构。希望这种结构对您有所帮助。

<div class = "container">
<div class = "row">
    <div class = "col-sm-3">
    </div>
    <div class = "col-sm-9">
        <div class = "row">
            <div class = "col-sm-12 text-center">
                <div class = "row text-center">
                    <h1>Oregon Tulip Festival</h1>
                </div>
                <div class = "jumbotron img-responsive">
                    <div class = "row">
                        <div class = "col-sm-12">
                            <p class = "jumbo">Sunset at the Tulip Festival</p>
                        </div>
                    </div>
                </div>
                <hr>
                <h2>Tulip festival | Experience Oregon's finest tulip arrangement</h2>
            </div>
        </div>
    </div>
</div>

为什么我的主容器太宽？只是col-9和col-3

1 个答案: