需要一些关于媒体查询的建议 CSS

Question

我希望有人能够帮助解决我目前在设计网站时遇到的问题。移动媒体查询是我被挂断的地方。

内容未居中。我可以简单地用 text-align 属性修复文本，我假设我可以将图像显示为一个块并使用 margin: 0 auto 将它居中，问题是容器本身不是居中。我正在使用 Bootstrap，它都在一个 Bootstrap 容器中。

我认为部分问题是在小屏幕上，我隐藏了一些内容，这些内容位于我无法使用 Bootstrap 的 "hidden-xs" 居中的内容的右侧，并且"hidden-sm" 属性。

这是屏幕截图中相关部分的代码，加上我的 CSS 媒体查询。如果有人能指出我正确的方向，我将不胜感激。

/* Content Styles*/
.gas-content {
 margin: 4.50em 0 4.50em 5%;
}

.left-content {
 margin: 2.50em 0 2.50em 5%;
}

.content-container {
 width: 75%;
 float: left;
}

.test-container {
 width: 25%;
 float: left;
 margin-top: -10px;
}

.move-up {
 margin-top: -2em;
}

.move-down {
 margin-top: 2em;
}

.img-center {
 display: block;
 margin: 0 auto;
}

.content-heading {
 color: rgb(3, 17, 85);
 font-family: 'Montserrat', sans-serif;
 font-weight: 600;
 line-height: 1.50em;
}

.services li {
 color: rgb(3, 17, 85);
 font-family: 'Montserrat', sans-serif;
 text-transform: uppercase;
 font-size: 1.25em;
 font-weight: 600;
}

.emergency-services li {
 color: rgb(3, 17, 85);
 font-family: 'Montserrat', sans-serif;
 text-transform: uppercase;
 font-size: 1.25em;
 font-weight: 600;
}

.contact-box {
 background-color: rgb(3, 17, 85);
 padding: 2em 0 6.50em 0;
}

.contact-box h3 {
 color: white;
 text-transform: uppercase;
 margin-left: 15px;
 font-family: 'Montserrat', sans-serif;
 font-weight: 600;
}

.contact-info {
 color: white;
 margin-left: 15px;
}

.eztouselogo {
 margin-left: 15px;
 margin-bottom: 15px;
}

.services-left {
 margin-right: 0.50em;
}

.content-paragraph {
 font-family: 'Open Sans', sans-serif;
 margin-bottom: 5em;
 line-height: 2.25em;
}


@media (max-width: 991px) {
 .test-container {
  display: none;
 }

 .content-container {
  display: block;
  margin: 0 auto;
  padding: 0 0 0 0;
  float: none;
  clear: both;
 }

 .container {
  display: block;
  margin: 0 auto;
  float: none;
  clear: both;
 }

 .pipes-img {
  width: 75%;
  height: 75%;
  display: block;
  margin: 0 auto;
  float: none;
 }
}

    <!--Begin Main Content -->
   <div class="container"> <!--New Container -->

    <div class="content-container"> <!--Content on Left Side of Testimonials -->
      <div class="row gas-content"> <!--Gas, Water, & Sewer Line Row -->
        <div class="col-md-4">
          <img class="pull-left img-responsive pipes-img" src="img/pipes.jpg">
        </div>
        <div class="col-xs-8 move-up">
          <h3 class="content-heading">Gas, Water, &amp; Sewer Line Inspection and Replacement in the Pittsburgh Area</h3>
          <p class="content-paragraph">Vivamus id ante molestie, vehicula justo nec, facilisis justo. Sed efficitur feugiat accumsan. Nunc vitae fermentum nulla. Aliquam imperdiet nunc felis, et malesuada ligula molestie eget. Proin sodales dictum semper. Proin nec sodales quam. Maecenas ac erat non mauris laoreet volutpat. Proin egestas enim ut magna sagittis vulputate. Aenean non odio lacus. Nam vehicula metus viverra quam laoreet, nec interdum orci porttitor. Etiam gravida velit sit amet commodo suscipit. Cras est erat, scelerisque quis velit non, luctus molestie ex.</p>
          <div class="row">
            <div class="col-xs-5">
              <ul class="services services-left">
                <li>Sewer Lines</li>
                <li>Gas Lines</li>
                <li>Water Lines</li>
              </ul>
            </div>
            <div class="col-xs-7">
              <ul class="services services-right">
                <li>Sewer Inspections</li>
                <li>Water Heaters</li>
                <li>Full-Service Plumbing</li>
              </ul>
            </div>
          </div>
        </div>
      </div> <!--End Gas, Water, & Sewer Line Row -->

Answer 1

将col-xs-8更改为col-md-8以匹配与图像上相同的断点。否则，包裹图像的 div 将是 100%，但兄弟 div 将保持 2/3s 宽度。

Answer 2

我认为我们（web 开发人员）不需要自定义 Bootstrap 框架的 media query。 Bootstrap 具有适用于所有设备的内置或默认媒体查询，例如：

超小型设备手机 (<768px)
Class 前缀：.col-xs-
小型设备平板电脑（≥768px）
Class 前缀：.col-sm-
中型设备台式机（≥992px）
Class 前缀：.col-md-
大型设备台式机（≥1200px）
Class 前缀：.col-lg-

我们只需要按原样使用它"cleverly"。

需要一些关于媒体查询的建议 CSS

Need some advice regarding a media query and CSS

html

css

centering

twitter-bootstrap