Div的使用引导CSS和电网系统的所有介质尺寸

我想一直保持我的div中使用引导格画面的中心为中心。我把它找合适的，直到我得到大小991，我该如何调整这永远停留在屏幕中心无论去什么尺寸下降到使用引导网格系统？Div的使用引导CSS和电网系统的所有介质尺寸

<!--=== 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>&nbsp;&nbsp;&nbsp; 
         <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 ===-->

来源

2017-02-23 David Brierton

您的加价问题--- 对于布局对中画面响应尺寸您需要使用class="col-md-8 col-offset-md-2"

您有问题的屏幕尺寸> = 991，因为你没有为小型设备的正常响应等级。

根据认定中的引导网格系统一个适当的rsponsive如下所以page--你必须使用class= "col-lg-* col-md-* col-sm-* col-xs-*"

超小型设备手机（< 768px） - .COL-XS-

小设备片剂（≥768px） - .COL-SM-

中等设备桌面（≥992px） - .COL-MD-

大型设备桌面（≥120 0像素） - .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>&nbsp;&nbsp;&nbsp; 
 
         <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>

来源

2017-02-23 18:31:13 neophyte

的整个宽度我有大屏幕这么大的差距我在容器上使用content-md，你知道我在尺寸缩小时如何在间隙中关闭？ –

你是什么意思，由大gap..can你解释一下。 – neophyte

内容-MD进一步下降到内容的间距为下一格下来的网页，但在屏幕尺寸变小的内容-SM看起来更好 –

Update Code

使用.service-block.service-block-utext-align:center

你可以改变col-sm-8到col-sm-12

来源

2017-02-23 18:21:05 cnsvnc

这只是使得它的屏幕 –

Div的使用引导CSS和电网系统的所有介质尺寸

回答

相关问题