我希望有人能够帮助解决我目前正在设计的网站中遇到的问题。移动媒体查询是我挂断的地方。
这是它的形象。
内容未居中。我可以简单地使用文本对齐属性修复文本，并且我假设我可以将图像显示为块并使用边距：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, & 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 -->将col-xs-8更改为col-md-8以匹配与图像上的断点相同的断点。否则，包装图像的div将为 100%，但同级div将保持 2/3s 宽度。
我认为
我们(Web开发人员(不需要自定义Bootstrap框架的媒体查询。Bootstrap具有适合所有设备的内置或默认媒体查询，例如：
- 超小型设备 电话 (<768px(
类前缀 ：.col-xs- - 小型设备 平板电脑 (≥768px(
类前缀 ：.col-sm- - 中型设备台式机 (≥992px(
类前缀 ：.col-md- - 大型设备台式机 (≥1200px(
类前缀 ：.col-lg-
我们只需要"巧妙地"使用它。