如何使bootstrap图像和div扩展到浏览器的宽度

Question

我在这里使用bootstrap布局，所以我想知道，如何使图像背景拉伸100％宽，灰色div颜色拉伸100％？

我不确定我是否应该使用容器液？任何想法都将是一个很大的帮助。谢谢。

描绘我想要的内容的图片：

到目前为止我在这个片段中的内容（全屏显示）：

＆＃13;

＆＃13;

body {
  background-color: #eee;
}
.heading {
  color: #fff;
  padding: 0 0 0 20px;
  margin-top: -300px;
  margin-bottom: 100px;
}
.profile-info-right-top {
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  background-color: #ddd;
}
.profile-info-right-top img {
  padding-right: 10px;
}
.user-profile {
  padding-bottom: 30px;
}
.profile-header-background {
  margin: 0 -30px 0 -30px;
}
.profile-header-background img {
  width: 100%;
  height: 400px;
}
.profile-info-left {
  position: relative;
  top: -180px;
}
.profile-info-left img.avatar {
  border: 2px solid #fff;
}
.profile-info-left h2 {
  font-family: "josefinslab-semibold";
  margin-bottom: 30px;
}
.profile-info-left .section {
  margin-top: 50px;
}
.profile-info-left .section h3 {
  font-size: 1.1em;
  font-weight: 700;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}
.profile-info-left ul.list-social > li {
  line-height: 2.3;
}
.profile-info-left ul.list-social > li i {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  position: relative;
  top: 1px;
  font-size: 16px;
  min-width: 16px;
  line-height: 1;
}
.profile-info-left ul.list-social > li a {
  color: #696565;
}
.profile-info-right .tab-content {
  padding: 30px 0;
  background-color: transparent;
}
@media screen and (max-width: 768px) {
  .profile-info-right-top {
    position: relative;
    top: -160px;
  }
  .profile-info-right {
    position: relative;
    top: -160px;
  }
}
.user-follower,
.user-following {
  position: relative;
  margin-bottom: 40px;
}
.user-follower img,
.user-following img {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  width: 40px;
}
.user-follower a,
.user-following a {
  font-size: 1.1em;
  line-height: 1;
}
.user-follower .username,
.user-following .username {
  font-size: 0.9em;
  line-height: 1.5;
}
.user-follower .btn,
.user-following .btn {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 92px;
}
.btn-toggle-following {
  background-color: #7bae16;
  color: #fff;
}
.btn-toggle-following:hover {
  background-color: #ef2020;
  color: #fff;
}
.btn-toggle-following:hover span {
  display: none;
}
.btn-toggle-following:hover:after {
  content: 'Unfollow';
  display: inline;
}
.btn-toggle-following:hover i:before {
  content: '\f129';
}
/* list icons */

.list-icons-demo li {
  margin-bottom: 20px;
  text-align: center;
}
.list-icons-demo li i {
  font-size: 24px;
}
.list-icons-demo2 li {
  margin-bottom: 10px;
}
.activity-item {
  overflow: visible;
  position: relative;
  margin: 15px 0;
  border-top: 1px dashed #ccc;
  padding-top: 15px;
}
.activity-item:first-child {
  border-top: none;
}
.activity-item .avatar {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  width: 32px;
}
.activity-item > i {
  font-size: 18px;
  line-height: 1;
}
.activity-item .media-body {
  position: relative;
}
.activity-item .activity-title {
  margin-bottom: 0;
  line-height: 1.3;
}
.activity-item .activity-attachment {
  padding-top: 20px;
}
.activity-item .well {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  border-left: 2px solid #cfcfcf;
  background: #fff;
  margin-left: 20px;
  font-size: 0.85em;
}
.activity-item .thumbnail {
  display: inline;
  border: none;
  padding: 0;
}
.activity-item .thumbnail img {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  width: auto;
  margin: 0;
}
.activity-item .activity-actions {
  position: absolute;
  top: 15px;
  right: 0;
}
.activity-item .activity-actions .btn i {
  margin: 0;
}
.activity-item .activity-actions .dropdown-menu > li > a {
  font-size: 0.9em;
  padding: 3px 10px;
}
.activity-item + .btn {
  margin-bottom: 15px;
}
.nav-tabs > li > a {
  -moz-border-radius-topleft: 2px;
  -webkit-border-top-left-radius: 2px;
  border-top-left-radius: 2px;
  -moz-border-radius-topright: 2px;
  -webkit-border-top-right-radius: 2px;
  border-top-right-radius: 2px;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  cursor: pointer;
}
.nav-pills > li > a {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: #1688ae;
}
.nav-tabs.tabs-iconized > li a,
.nav-pills.tabs-iconized > li a {
  padding-top: 0;
  padding-bottom: 5px;
}
.nav-tabs.tabs-iconized > li i,
.nav-pills.tabs-iconized > li i {
  position: relative;
  margin-right: 3px;
  top: 4px;
  font-size: 24px;
}
.tab-content {
  padding: 30px 15px 15px 15px;
  background-color: #fff;
}
.nav.nav-tabs-custom-colored > li > a {
  border-color: #ccc;
  border-bottom: transparent;
}
.nav.nav-tabs-custom-colored > li > a:hover,
.nav.nav-tabs-custom-colored > li > a:focus {
  background-color: #1688ae;
}
.nav-tabs.nav-tabs-custom-colored {
  border-bottom-color: #1688ae;
}
.nav-tabs.nav-tabs-custom-colored > li {
  z-index: 0;
  margin-bottom: 0;
  background-color: #fff;
}
.nav-tabs.nav-tabs-custom-colored > li > a {
  -moz-border-radius-topleft: 2px;
  -webkit-border-top-left-radius: 2px;
  border-top-left-radius: 2px;
  -moz-border-radius-topright: 2px;
  -webkit-border-top-right-radius: 2px;
  border-top-right-radius: 2px;
  color: #696565;
  margin-right: 0;
}
.nav-tabs.nav-tabs-custom-colored > li > a:hover,
.nav-tabs.nav-tabs-custom-colored > li > a:focus {
  color: #fff;
  border-color: #1688ae;
}
.nav-tabs.nav-tabs-custom-colored > li.active > a,
.nav-tabs.nav-tabs-custom-colored > li.active > a:hover,
.nav-tabs.nav-tabs-custom-colored > li.active > a:focus {
  color: #fff;
  background-color: #1688ae;
  border-color: #1688ae;
  border-bottom: transparent;
}
.nav-tabs > li.active {
  z-index: 1;
}
.nav-pills-custom-minimal {
  border-bottom: 1px solid #ccc;
}
.nav-pills-custom-minimal > li > a {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  padding: 10px;
  border-top: 4px solid transparent;
  color: #696565;
}
.nav-pills-custom-minimal > li > a:hover,
.nav-pills-custom-minimal > li > a:focus {
  background-color: transparent;
  color: #4f4c4c;
}
.nav-pills-custom-minimal > li.active > a,
.nav-pills-custom-minimal > li.active > a:hover,
.nav-pills-custom-minimal > li.active > a:focus {
  background-color: transparent;
  border-top-color: #94c632;
  color: #696565;
}
.nav-pills-custom-minimal > li + li {
  margin-left: 30px;
}
@media screen and (max-width: 480px) {
  .nav-pills-custom-minimal > li + li {
    margin-left: 0;
  }
}
.nav-pills-custom-minimal.custom-minimal-bottom > li a {
  border-top: none;
  border-bottom: 4px solid transparent;
}
.nav-pills-custom-minimal.custom-minimal-bottom > li.active > a,
.nav-pills-custom-minimal.custom-minimal-bottom > li.active > a:hover,
.nav-pills-custom-minimal.custom-minimal-bottom > li.active > a:focus {
  border-bottom-color: #94c632;
}

＆＃13;

<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="container">
  <div class="user-profile">
    <div class="profile-header-background">
      <img src="http://placekitten.com/1000/400" alt="Profile Header Background">
    </div>
    <div class="row">
      <div class="col-md-12 heading">
        <h2>User name</h2>
        <span>title</span>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <div class="profile-info-left">
          <div class="text-left">
            <img src="http://placekitten.com/310/400" alt="Avatar" class="avatar">
          </div>
          <div class="action-buttons">
            <div class="row">
              <div class="col-xs-6">
                <a href="#" class="btn btn-success btn-block"><i class="fa fa-plus-round"></i> Follow</a>
              </div>
              <div class="col-xs-6">
                <a href="#" class="btn btn-primary btn-block"><i class="fa fa-android-mail"></i> Message</a>
              </div>
            </div>
          </div>
          <div class="section">
            <h3>About</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>
      </div>
      <div class="col-md-8">
        <div class="clearfix profile-info-right-top">
          <div class="col-md-12">
            <img src="http://placehold.it/30x30" />
            <img src="http://placehold.it/30x30" />
            <img src="http://placehold.it/30x30" />
            <img src="http://placehold.it/30x30" />
            <img src="http://placehold.it/30x30" />
            <img src="http://placehold.it/30x30" />
            <img src="http://placehold.it/30x30" />
            <img src="http://placehold.it/30x30" />
            <img src="http://placehold.it/30x30" />

          </div>
        </div>

        <div class="profile-info-right">
          <ul class="nav nav-pills nav-pills-custom-minimal custom-minimal-bottom">
            <li class="active"><a href="#activities" data-toggle="tab">HEADING</a>
            </li>
            <li><a href="#followers" data-toggle="tab">HEADING</a>
            </li>
            <li><a href="#following" data-toggle="tab">HEADING</a>
            </li>
          </ul>
          <div class="tab-content">
            <!-- activities -->
            <div class="tab-pane fade in active" id="activities">
              <div class="media activity-item">
                <a href="#" class="pull-left">
                  <img src="http://placekitten.com/20/20" alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                  <p class="activity-title"><a href="#">Antonius</a> started following <a href="#">Jack Bay</a>  <small class="text-muted">- 2m ago</small>
                  </p>
                  <small class="text-muted">Today 08:30 am - 02.05.2014</small>
                </div>
                <div class="btn-group pull-right activity-actions">
                  <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-th"></i>
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-right" role="menu">
                    <li><a href="#">I don't want to see this</a>
                    </li>
                    <li><a href="#">Unfollow Antonius</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Get Notification</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="media activity-item">
                <a href="#" class="pull-left">
                  <img src="http://placekitten.com/20/20" alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                  <p class="activity-title"><a href="#">Jane Doe</a> likes <a href="#">Jack Bay</a>  <small class="text-muted">- 36m ago</small>
                  </p>
                  <small class="text-muted">Today 07:23 am - 02.05.2014</small>
                </div>
                <div class="btn-group pull-right activity-actions">
                  <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-th"></i>
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-right" role="menu">
                    <li><a href="#">I don't want to see this</a>
                    </li>
                    <li><a href="#">Unfollow Jane Doe</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Get Notification</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="media activity-item">
                <a href="#" class="pull-left">
                  <img src="http://placekitten.com/20/20" alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                  <p class="activity-title"><a href="#">Michael</a> posted something for <a href="#">Jack Bay</a>  <small class="text-muted">- 1h ago</small>
                  </p>
                  <small class="text-muted">Today 07:23 am - 02.05.2014</small>
                  <div class="activity-attachment">
                    <div class="well well-sm">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </div>
                  </div>
                </div>
                <div class="btn-group pull-right activity-actions">
                  <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-th"></i>
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-right" role="menu">
                    <li><a href="#">I don't want to see this</a>
                    </li>
                    <li><a href="#">Unfollow Michael</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Get Notification</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="media activity-item">
                <a href="#" class="pull-left">
                  <img src="http://placekitten.com/20/20" alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                  <p class="activity-title"><a href="#">Jack Bay</a> has uploaded two photos <small class="text-muted">- Yesterday</small>
                  </p>
                  <small class="text-muted">Yesterday 06:42 pm - 01.05.2014</small>
                  <div class="activity-attachment">
                    <div class="row">
                      <div class="col-md-6">
                        <a href="#" class="thumbnail">
                          <img src="http://placekitten.com/210/210" alt="Uploaded photo">
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="btn-group pull-right activity-actions">
                  <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-th"></i>
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-right" role="menu">
                    <li><a href="#">I don't want to see this</a>
                    </li>
                    <li><a href="#">Unfollow Jack Bay</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Get Notification</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="media activity-item">
                <a href="#" class="pull-left">
                  <img src="http://placekitten.com/20/20" alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                  <p class="activity-title"><a href="#">Jack Bay</a> has changed his profile picture <small class="text-muted">- 2 days ago</small>
                  </p>
                  <small class="text-muted">2 days ago 05:42 pm - 30.04.2014</small>
                  <div class="activity-attachment">
                    <a href="#" class="thumbnail">
                      <img src="http://placekitten.com/210/210" alt="Uploaded photo">
                    </a>
                  </div>
                </div>
                <div class="btn-group pull-right activity-actions">
                  <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-th"></i>
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-right" role="menu">
                    <li><a href="#">I don't want to see this</a>
                    </li>
                    <li><a href="#">Unfollow Jack Bay</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Get Notification</a>
                    </li>
                  </ul>
                </div>
              </div>
              <button type="button" class="btn btn-default center-block"><i class="fa fa-refresh"></i> Load more activities</button>
            </div>
            <!-- end activities -->
            <!-- followers -->
            <div class="tab-pane fade" id="followers">
              <div class="media user-follower">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Antonius<br><span class="text-muted username">@mrantonius</span></a>
                  <button type="button" class="btn btn-sm btn-toggle-following pull-right"><i class="fa fa-checkmark-round"></i>  <span>Following</span>
                  </button>
                </div>
              </div>
              <div class="media user-follower">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Michael<br><span class="text-muted username">@iamichael</span></a>
                  <button type="button" class="btn btn-sm btn-default pull-right"><i class="fa fa-plus"></i> Follow</button>
                </div>
              </div>
              <div class="media user-follower">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Stella<br><span class="text-muted username">@stella</span></a>
                  <button type="button" class="btn btn-sm btn-default pull-right"><i class="fa fa-plus"></i> Follow</button>
                </div>
              </div>
              <div class="media user-follower">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Jane Doe<br><span class="text-muted username">@janed</span></a>
                  <button type="button" class="btn btn-sm btn-toggle-following pull-right"><i class="fa fa-checkmark-round"></i>  <span>Following</span>
                  </button>
                </div>
              </div>
              <div class="media user-follower">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">John Simmons<br><span class="text-muted username">@jsimm</span></a>
                  <button type="button" class="btn btn-sm btn-default pull-right"><i class="fa fa-plus"></i> Follow</button>
                </div>
              </div>
              <div class="media user-follower">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Antonius<br><span class="text-muted username">@mrantonius</span></a>
                  <button type="button" class="btn btn-sm btn-toggle-following pull-right"><i class="fa fa-checkmark-round"></i>  <span>Following</span>
                  </button>
                </div>
              </div>
              <div class="media user-follower">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Michael<br><span class="text-muted username">@iamichael</span></a>
                  <button type="button" class="btn btn-sm btn-default pull-right"><i class="fa fa-plus"></i> Follow</button>
                </div>
              </div>
              <div class="media user-follower">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Stella<br><span class="text-muted username">@stella</span></a>
                  <button type="button" class="btn btn-sm btn-default pull-right"><i class="fa fa-plus"></i> Follow</button>
                </div>
              </div>
              <div class="media user-follower">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Jane Doe<br><span class="text-muted username">@janed</span></a>
                  <button type="button" class="btn btn-sm btn-toggle-following pull-right"><i class="fa fa-checkmark-round"></i>  <span>Following</span>
                  </button>
                </div>
              </div>
              <div class="media user-follower">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">John Simmons<br><span class="text-muted username">@jsimm</span></a>
                  <button type="button" class="btn btn-sm btn-default pull-right"><i class="fa fa-plus"></i> Follow</button>
                </div>
              </div>
            </div>
            <!-- end followers -->
            <!-- following -->
            <div class="tab-pane fade" id="following">
              <div class="media user-following">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Stella<br><span class="text-muted username">@stella</span></a>
                  <button type="button" class="btn btn-sm btn-danger pull-right"><i class="fa fa-close-round"></i> Unfollow</button>
                </div>
              </div>
              <div class="media user-following">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Jane Doe<br><span class="text-muted username">@janed</span></a>
                  <button type="button" class="btn btn-sm btn-danger pull-right"><i class="fa fa-close-round"></i> Unfollow</button>
                </div>
              </div>
              <div class="media user-following">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">John Simmons<br><span class="text-muted username">@jsimm</span></a>
                  <button type="button" class="btn btn-sm btn-danger pull-right"><i class="fa fa-close-round"></i> Unfollow</button>
                </div>
              </div>
              <div class="media user-following">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Antonius<br><span class="text-muted username">@mrantonius</span></a>
                  <button type="button" class="btn btn-sm btn-danger pull-right"><i class="fa fa-close-round"></i> Unfollow</button>
                </div>
              </div>
              <div class="media user-following">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Michael<br><span class="text-muted username">@iamichael</span></a>
                  <button type="button" class="btn btn-sm btn-danger pull-right"><i class="fa fa-close-round"></i> Unfollow</button>
                </div>
              </div>
              <div class="media user-following">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Stella<br><span class="text-muted username">@stella</span></a>
                  <button type="button" class="btn btn-sm btn-danger pull-right"><i class="fa fa-close-round"></i> Unfollow</button>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将主标题图像和缩略图移出.container类，因为您不希望在各种视口大小下限制它们的宽度，这是.container所做的。

所以伪代码是：

<header>
  <img>
  <thumbnails>
</header>
<main>
  <leftcolumn>
    <img>
  </leftcolumn>
  <rightcolumn>
    <text>
    <text>
  </rightcolumn>
</main>

要使缩略图与主体中的图像和内容保持一致，您需要复制缩略图周围主体中使用的.col-md-**类。

由于你想要重叠内容，我会在左栏中添加一个负边距，以便将其拉出来并覆盖标题内容。

以下是一些基本标记，用于演示我建议的方法。

header .primary-img {
  width: 100%;
}
.img-list {
  background-color: #eee;
}
.img-list ul,
.img-list li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.img-list li {
  display: inline-block;
  margin: 1.5rem 0.5rem;
}
.content {
  margin: 50px 0;
}
@media (min-width: 992px) {
  .content .left {
    margin-top: -225px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="primary-header">
  <img class="primary-img" src="http://placehold.it/1200x400">
  <div class="img-list">
    <div class="container">
      <div class="row">
        <div class="col-md-offset-4 col-md-8">
          <ul>
            <li>
              <img src="http://placehold.it/50x50&text=1">
            </li>
            <li>
              <img src="http://placehold.it/50x50&text=2">
            </li>
            <li>
              <img src="http://placehold.it/50x50&text=3">
            </li>
            <li>
              <img src="http://placehold.it/50x50&text=4">
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>
<main class="content">
  <div class="container">
    <div class="row">
      <div class="left col-md-4">
        <img class="img-responsive" src="http://placehold.it/300x400/ffcc00">
      </div>
      <div class="col-md-8">
        <p>
          Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
        </p>
        <p>
          Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
        </p>
        <p>
          Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
        </p>
      </div>
    </div>
  </div>
</main>

注意：注意我考虑了如何处理较小的屏幕，图像重叠可能无法锻炼，需要移动它。

修改

根据以下评论，我添加了移动头像图像的解决方案。

如果你需要做的就是将头像img从一个区域移动到另一个区域，最简单的方法就是将它包含在需要两次的标记中。然后使用媒体查询隐藏/显示适合屏幕大小的头像。

我为每张图片制作了不同的颜色，以便您轻松识别开关。

header .primary-img {
  width: 100%;
}
.img-list {
  background-color: #eee;
}
.img-list ul,
.img-list li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.img-list li {
  display: inline-block;
  margin: 1.5rem 0.5rem;
}
.content {
  margin: 50px 0;
}
.sidebar-avatar {
  display: none;
}
@media (min-width: 992px) {
  .header-avatar {
    display: none;
  }
  .sidebar-avatar {
    display: block;
  }
  .content .left {
    margin-top: -225px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="primary-header">
  <img class="primary-img" src="http://placehold.it/1200x400">
  <div class="header-avatar">
    <img class="img-responsive" src="http://placehold.it/300x400/ffcc00?text=avatar+1">
  </div>
  <div class="img-list">
    <div class="container">
      <div class="row">
        <div class="col-md-offset-4 col-md-8">
          <ul>
            <li>
              <img src="http://placehold.it/50x50&text=1">
            </li>
            <li>
              <img src="http://placehold.it/50x50&text=2">
            </li>
            <li>
              <img src="http://placehold.it/50x50&text=3">
            </li>
            <li>
              <img src="http://placehold.it/50x50&text=4">
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>
<main class="content">
  <div class="container">
    <div class="row">
      <div class="left col-md-4">
        <div class="sidebar-avatar">
        <img class="img-responsive" src="http://placehold.it/300x400/A3D76F?text=avatar+2">
        </div>
      </div>
      <div class="col-md-8">
        <p>
          Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
        </p>
        <p>
          Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
        </p>
        <p>
          Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
        </p>
      </div>
    </div>
  </div>
</main>

Answer 2

我不知道你想要做什么以及如何修复它，但是对于你的css的性质和你试图复制的图像，我认为你应该使用下一个属性：

• Background Image（用于将图像作为背景操作，而不是作为img标记操作）
• Background Position（用于将图像定位在中心）
• Background Repeat（“无重复”值可让您用单张图片覆盖背景）
• Background Size（'cover'值可用于覆盖元素的所有背景，因此它可以具有其元素宽度的100％）

我认为this tutorial也非常有用。

请告诉我们是否可以提供任何其他帮助。

Answer 3

移动： -

<div class="profile-header-background">
  <img src="http://placekitten.com/1000/400" alt="Profile Header Background">
</div>
<div class="clearfix profile-info-right-top">
      <div class="col-md-12">
        <img src="http://placehold.it/30x30">
        <img src="http://placehold.it/30x30">
        <img src="http://placehold.it/30x30">
        <img src="http://placehold.it/30x30">
        <img src="http://placehold.it/30x30">
        <img src="http://placehold.it/30x30">
        <img src="http://placehold.it/30x30">
        <img src="http://placehold.it/30x30">
        <img src="http://placehold.it/30x30">

      </div>
    </div>

在容器类之上。

您需要修复col-md-12的内容。

Answer 4

对于图像和灰色div，您应该使用容器周围的包装器。不要使用容器 - 液体，因为你的主柱结构会弄乱。尝试在容器周围添加另一个div，并为此div提供背景图像/颜色。

对于您的背景图片，请使用以下代码：

<div class="profile-header-background">
</div>
<div class="grey-div">
   <div class="container grey-container">
      ..place your grey content here..
   </div>
</div>
<div class="container">
  ..place your content here..
</div>

使用以下CSS：

.profile-header-background {
   height: 400px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-image: url('http://placecage.com/1000/400');
   width: 100%;
}
.grey-div {
   background: grey;
}

由于您使用的是margin-top: -300px，因此只需将容器放在室外和背景图像之后即可。