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

Question

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

This is an image of it.

内容不居中。我可以简单地使用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/3宽度。

Answer 2

我认为我们（ Web开发人员）不需要自定义Bootstrap Framework的媒体查询。 Bootstrap具有适合所有设备的内置或默认媒体查询，例如：

1. 超小型设备手机（＆lt; 768px）
   类前缀： CloseableHttpResponse response = client.execute(request); try { HttpEntity entity = response.getEntity(); String body = EntityUtils.toString(entity); checkResult(body); EntityUtils.consume(entity); } finally { response.close(); }
2. 小型设备平板电脑（≥768px）
   类前缀：.col-xs-
3. 中型设备台式机（≥992px）
   类前缀：.col-sm-
4. 大型设备台式机（≥1200px）
   类前缀：.col-md-

我们只需要“巧妙地”使用它。