修复由引导程序提供支持的网页中的页脚问题

Question

我有一个要求，如果浏览器的大小小于992*1024，那么会自动添加滚动。我写的页脚正在工作，但我无法定位 Media 部分。 我写了一个如屏幕截图所示的页脚：

我正在尝试创建一个类似于以下内容的页脚：
这是代码。

.imgcontainer {
  background: #E6E6E6;
  box-shadow: 0 4px 2px 1px #000;
}
#footer {
  height: 350px;
  background: #003663;
  min-width: 992px;
}
#footerItems {
  min-width: 992px;
  width: 100%;
  padding: 0px 6%;
  min-width: 992px;
}
#footerItems div {
  display: inline-block;
  color: #FFF;
  padding-top: 2%;
  font-weight: bold;
  font-size: 16px;
}
.accountPos {
  padding-left: 3%;
}
#footerItems div ul {
  padding-left: 0;
}
#footerItems div ul li {
  list-style-type: none;
  font-weight: 400;
  font-size: 13px;
  font-style: italic;
}
#videoptions {
  height: 74px;
  width: 23px;
  background-color: #4c5053;
}
#footerItems div video {
  min-width: 35px;
  min-height: 30px;
}
.socialinks {
  min-width: 450px;
  width: 39%;
  float: left;
}
.slinks {
  padding-left: 14%;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="footer">
  <div class="col-md-12 imgcontainer">
    <img src="images/Bistip-in-media.png" class="center-block">
  </div>
  <div id="footerItems" class="col-md-12">
    <div style="width: 12%;">About Us
      <ul>
        <li>About us</li>
        <li>Media reviews</li>
        <li>Bistip guide</li>
      </ul>
    </div>
    <div class="accountPos" class="">Account Information
      <ul>
        <li>About us</li>
        <li>Media reviews</li>
        <li>Bistip guide</li>
      </ul>
    </div>
    <div class="accountPos" class="col-md-3" style="padding-left: 9%;">Market
      <ul>
        <li>About us</li>
        <li>Media reviews</li>
        <li>Bistip guide</li>
      </ul>
    </div>
    <div class="accountPos" style="padding-left: 9%;">Bistip
      <ul>
        <li>About us</li>
        <li>Media reviews</li>
        <li>Bistip guide</li>
      </ul>
    </div>
    <div class="" style="padding-top: 2%;">Media
      <div>
        <video controls height="30" width="60">
          <source src="movie.mp4" type="video/mp4">
            <source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.
        </video>
      </div>
    </div>
    <div class="socialinks">
      <div>
        <img src="images/fb.png" alt="f" style="width: 29%;">Facebook
      </div>
      <div class="slinks">
        <img src="images/tw.png" alt="t">Twitter
      </div>
      <div class="slinks">
        <img src="images/go.png" alt="g">Google+
      </div>
    </div>
  </div>
</div>

一切看起来都不错，但Media 部分没有正常运行。我该如何解决？ JSFiddle 链接为here。

Answer 1

首先，根据引导网格系统正确地重新组织您的代码。使用容器和行类并将列放在行内。

bootstrap grid system