容器 class 的媒体查询

Question

我的屏幕尺寸是这样的

27in. Monitor, Dell U2711: 2560px wide x 1440px high
17in. Workstation: 1920px wide x 1200px high
15in. Macbook Pro: 1680px wide x 1050px high
11in. Macbook Air: 1366px wide x 768px high
iPad (Landscape): 1024px wide x 768px high
iPad (Portrait): 768px wide x 1024px high
Nexus7 (Landscape): 966px wide x 603px high
Nexus7 (Portrait): 603px wide x 966px high
iPhone (Landscape): 480px wide x 320px high
iPhone (Portrait): 320px wide x 480px high

我尝试使用媒体查询，但我左对齐，我想要全屏

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Layout123</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">



</head>


<body>
<div class="container">

    <div class="row">
        <div class="col-xs-6 col-md-8 col-lg-12">
        <img src="http://chinadomination.com/RC-2.png" class="img-responsive" alt="Responsive image">
        </div>
        </div>

    <div class="row">
        <div class="col-xs-6 col-md-8 col-lg-12">
        <img src="http://chinadomination.com/china_under.png" class="img-responsive" alt="Responsive image">
        </div>
        </div>

</div>  


</body>
</html>

我想将所有桌面的容器居中对齐，移动设备的全屏对齐

Answer 1

添加 bootstrap 偏移量

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

<div class="container">

    <div class="row">
        <div class="col-xs-6 col-xs-offset-3 col-md-8 col-md-offset-2 col-lg-12">
        <img src="http://chinadomination.com/RC-2.png" class="img-responsive" alt="Responsive image">
        </div>
        </div>

    <div class="row">
        <div class="col-xs-6 col-xs-offset-3 col-md-8 col-md-offset-2 col-lg-12">
        <img src="http://chinadomination.com/china_under.png" class="img-responsive" alt="Responsive image">
        </div>
        </div>

</div>

Answer 2

你改变了问题，这就是我添加另一个答案的原因

如果您不想在移动视图中获得大小为 6 的列，只需添加 col-lg-12

<style>
.imgCenter{
margin-left: auto;
  margin-right: auto;
}
</style>
    <div class="container">

        <div class="row">
            <div class="col-lg-12">
            <img src="http://chinadomination.com/RC-2.png" class="img-responsive imgCenter" alt="Responsive image">
            </div>
            </div>

        <div class="row">
            <div class="col-lg-12">
            <img src="http://chinadomination.com/china_under.png" class="img-responsive imgCenter" alt="Responsive image">
            </div>
            </div>

    </div>

容器 class 的媒体查询

Media queries for container class

twitter-bootstrap

media-queries