Question

道歉，如果这是非常基本的，但我有一个问题，一个自举右侧边栏没有占据整个右手区域。单独div区域中的图像与此侧栏重叠。如果我向侧边栏添加更多内容，它就会变成废话。
如何让两个较小的图像占据与div-col-med-8相同的宽度。也许我正在以错误的方式看待这个，我正在学习HTML CSS等，所以我有点困惑非常感谢任何帮助。

这是网站的链接

http://vigilant-bardeen-58c461.bitballoon.com/

这是dropboxlink

https://www.dropbox.com/s/1i0qfpijgekvdfj/newsweek.zip?dl=0。

由于
尼尔

Answer 1

    <!DOCTYPE html>
<html lang="en">
  <!-- Head -->
  <head>
    <title>Newsweek</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/navbar.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <link href="css/sidebar.css" rel="stylesheet">
  </head>

  <!-- Body -->
  <body>
    <!-- Navbar -->
    <nav class="topnav navbar navbar-inverse navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header hidden-xs">
          <a href="#" class="pull-left">
            <img class="visible-sm visible-lg" src="images/logo/logo_lg.svg" alt="">
            <img class="visible-md" src="images/logo/logo-sm.svg" alt="">
          </a>
        </div>
        <ul class="nav navbar-nav navbar-left nav-items visible-md visible-lg">
          <li><a href="#">U.S.</a></li>
          <li><a href="#">WORLD</a></li>
          <li><a href="#">BUSINESS</a></li>
          <li><a href="#">TECH & SCIENCE</a></li>
          <li><a href="#" class="glyphicon glyphicon-search"></a></li>
        </ul>
        <div id="navbar" class="navbar-collapse collapse">
          <a href="#" class="pull-left">
            <img class="visible-xs" src="images/logo/logo-sm.svg" alt="">
          </a>
          <!-- Smaller Screen Nav Bar -->
          <ul class="nav navbar-nav navbar-right hidden-lg hidden-md">
            <li class="divider-vertical"></li>
            <li class="dropdown dropdown-style">
              <a href="#" id="search-box" class="dropdown-toggle glyphicon glyphicon-search" data-toggle="dropdown"></a>
              <div class="banner-width-set">
              </div>
            </li>
            <li class="divider-vertical"></li>
            <li class="dropdown dropdown-style-sm-hamburger">
              <a href="#" id="hamburger" class="dropdown-toggle glyphicon glyphicon-menu-hamburger" data-toggle="dropdown"></a>
              <div class="banner-width-set">
              </div>
            </li>
          </ul>
          <!-- lg Screen Nav Bar -->
          <ul class="nav navbar-nav navbar-right visible-lg visible-md">
            <li class="divider-vertical"></li>
            <li class="dropdown">
              <a href="#" id="circular-image" class="dropdown-toggle" data-toggle="dropdown">
                <div class="banner-subscribe-to">
                  <div class="wrapper">
                    <p><img class="img-circle" src="images/navbar/nav-bar-img.jpg">
                      <span>Subscribe <br> To Newsweek</span>
                    </p>
                  </div>
                </div>
              </a>
            </li>
            <li class="divider-vertical"></li>
            <li class="dropdown dropdown-style">
              <a href="#" id="map-marker" class="dropdown-toggle glyphicon glyphicon-map-marker" data-toggle="dropdown"></a>
            </li>
            <li class="divider-vertical"></li>
            <li><a href="#">Sign In</a>
              <div class="banner-sign-in">
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container main-content">
      <div class="row">

        <div class="col-md-8">
          <img src="images/main/main_main.jpg" class=" main-image img-responsive"   alt="news reader">
        <!--Main-->
        </div>

<div class="row">
        <div class="col-md-4 sidebar ">
        <!--Side Menu-->
        <h1 class="headlines-title text-left">Latest Headlines</h1>
          <ul>

            <li class="latest-headlines"> <span class="bullet-text">Watch: Gorilla Gives Birth to First Son Moke</span></li>
            <hr>
            <li class="latest-headlines"> <span class="bullet-text">Woman Charged Over Attack on Pregnant Service Woman</li>
               <hr>
            <li class="latest-headlines"> <span class="bullet-text">'Sick and Tired of Being Babied': Embiid Lashes out</li>
               <hr>
            <li class="latest-headlines"> <span class="bullet-text">Syrian Independence Day: Facts on Freedom from France</li>
               <hr>
            <li class="latest-headlines"><span class="bullet-text">‘The Terror’ Episode 5: The Tuunbaq Attacks</li>
               <hr>
            <li class="latest-headlines"><span class="bullet-text">White Evangelical Support for Trump Grows</li>
              <hr>

            <li class="latest-headlines"><span class="bullet-text">White Evangelical Support for Trump Grows</li>


          </ul>
          <button type="button" class="btn btn-primary btn-block">See All Headlines</button>
        </div>

      </div>
    </div>

    </div>

    <!-- ******* more content ***** -->

      <div class="container more-content">
        <div class="row">

        <div class="col-md-8">
          <h3> <span class="country-header text-center" >U.S</span></h3>
          <h4>JUSTICE DEPARTMENT TO FORCE REFORMS</h4>
          <h5>Residents of Ferguson have waited nearly a year for their city to adopt the agreement. </h5>
        <!--Main-->
        </div>
        <div class="container more-content">
          <div class="row">
          <div class="col-md-6">
            <div class="content">
              <img src="images/main/main1.png" alt="man on sinking car" class="img-thumbnail">
            </div>
          </div>

        <div class="row">
          <div class="col-md-6"></div>
           <div class="content">
          <img src="images/main/main2.jpg" alt="asian university photo" class="img-thumbnail">
        </div>
         </div>

</div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Bootstrap右手侧边栏不够长

1 个答案: