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

添加自举偏移

使用.col-md-offset- *类向右移动列。这些类通过*列增加列的左边距。例如，.col-md-offset-4在四列上移动.col-md-4。

<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>

容器类的媒体查询

2 个答案: