我试图使用 Bootstrap 网格将我的 div 始终保持在屏幕中央。在我达到 991 尺寸之前，我一直保持它看起来正确，如何使用 Bootstrap 网格系统将它调整为始终保持在屏幕中央，无论它缩小到什么尺寸？
http://jsfiddle.net/dJDHd/2162/
<!--=== Content ===-->
<div class="container content-md">
<div class="col-md-offset-2 col-sm-8">
<p class="text-center margin-bottom-20"><strong>You must accept the terms of usage of this website before you can continue. Click on the "I Agree" button to continue or the "I Do Not Agree" button to close this window.</strong></p>
</div>
<div class="row margin-bottom-100">
<div class="col-md-offset-2 col-sm-8">
<div class="service-block service-block-u">
<p>Under F.S. 668.6076, e-mail addresses are public records. If you do not want your e-mail address released in response to a public-records request, do not send electronic mail to this entity. Instead, contact this office by phone or in writing. The accuracy of the information provided on this website is not guaranteed for legal purposes. Changes occur daily to the content. To obtain the most current information, please contact the Manatee County Tax Collector's office. All online payment transactions are final, and cannot be reversed, cancelled, post-dated or refunded. Copyright ©2002-2016 Manatee County Tax Collector's Office. All rights reserved</p>
<button type="button" class="btn btn-default">I Agree</button>
<button type="button" class="btn btn-default">I Do Not Agree</button>
</div>
</div>
</div>
<div class="col-md-offset-2 col-sm-8">
<p class="text-center"><strong>THIS INFORMATION IS BELIEVED TO BE CORRECT BUT IS SUBJECT TO CHANGE AND NOT WARRANTED</strong></p>
</div>
</div>
<!--=== End Content ===-->
最佳答案
您的标记有问题---
要使布局响应中等屏幕尺寸，您需要使用 class="col-md-8 col-offset-md-2"
您遇到屏幕尺寸 >= 991 的问题，因为您没有适合小型设备的响应类。
根据如下定义的 Bootstrap 网格系统，对于适当的响应页面——你必须使用 class= "col-lg-* col-md-* col-sm-* col-xs-*"
Extra small devices Phones (<768px) - .col-xs-
Small devices Tablets (≥768px) - .col-sm-
Medium devices Desktops (≥992px) - .col-md-
Large devices Desktops (≥1200px) - .col-lg-
工作示例
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
</head>
<body>
<div class="container content-md">
<div class="col-md-offset-2 col-md-8 col-sm-8 col-sm-offset-2">
<p class="text-center margin-bottom-20"><strong>You must accept the terms of usage of this website before you can continue. Click on the "I Agree" button to continue or the "I Do Not Agree" button to close this window.</strong></p>
</div>
<div class="row margin-bottom-100">
<div class="col-md-offset-2 col-md-8 col-sm-8 col-sm-offset-2">
<div class="service-block service-block-u">
<p>Under F.S. 668.6076, e-mail addresses are public records. If you do not want your e-mail address released in response to a public-records request, do not send electronic mail to this entity. Instead, contact this office by phone or in writing. The accuracy of the information provided on this website is not guaranteed for legal purposes. Changes occur daily to the content. To obtain the most current information, please contact the Manatee County Tax Collector's office. All online payment transactions are final, and cannot be reversed, cancelled, post-dated or refunded. Copyright ©2002-2016 Manatee County Tax Collector's Office. All rights reserved</p>
<button type="button" class="btn btn-default">I Agree</button>
<button type="button" class="btn btn-default">I Do Not Agree</button>
</div>
</div>
</div>
<div class="col-md-offset-2 col-md-8 col-sm-8 col-sm-offset-2">
<p class="text-center"><strong>THIS INFORMATION IS BELIEVED TO BE CORRECT BUT IS SUBJECT TO CHANGE AND NOT WARRANTED</strong></p>
</div>
</div>
<!--=== End Content ===-->
</body>
</html>关于html - 使用 bootstrap css 和网格系统以所有媒体大小为中心的 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42423316/