Question

我想使用Bootstrap的.container属性来格式化我的网站，而不是.container-fluid，因为我想在某些视口处限制宽度。我也想让一半（桌面）网站静止，填充窗口的左半部分。我可以做到这一点，但当我使用position：fixed; col-md-6采用视口全宽的50％，而不是.container，我的内容在右半部分下方，你可以看到我在哪里使白色背景的不透明度更低。

如何修复响应内容的左半部分，同时仍保持.container的宽度属性？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>

    .leftside {
    background-image: url("http://studiotierney.com/studiotierneycom/sample/images/leftside-BG.jpg");
    background-size:cover;
    background-position:50% 50%;
    padding:0;
    }

    @media (max-width:991px) {
    .leftside {
        height:800px;
        color:white;
        padding:0;
    }
    .bluebg {
        position:absolute;
        width:100%;
        background-color:#0063af;
        top: 0;
        left: 0;
        padding: 0; /* Cover the full screen width */
        height:800px;
    }
    }

    @media (min-width:992px) {
    .leftside {
        position:fixed;
        height:100%;
        color:white;
        overflow:hidden;
        padding:0;
    }
    .bluebg {
        position:fixed;
        width:50%;
        background-color:#0063af;
        top: 0;
        left: 0;
        padding: 0; /* Cover the full screen width */
        height:100%;
    }
    }

    .logo {
        text-align:center;
    }



    </style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
  </head>
  <body>


<div class="container bluebg"></div>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-6 leftside">
                <div class="row">
                    <div class="col-xs-2" style="background-color:yellow; height:300px;"></div>
                    <div class="col-xs-8 logo">
                        <img src="http://studiotierney.com/studiotierneycom/sample/images/sampleLogo.png" class="img-responsive" alt="Sample Logo" style="margin:auto;" />
                    </div>
                    <div class="col-xs-2" style="background-color:yellow; height:300px;"></div>
                </div>
        </div>
        <div class="col-xs-12 col-md-6 col-md-offset-6" style="background-color:white;height:4000px; opacity:.8;">Scroll Content</div>
    </div>
</div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="../js/jquery-1.11.3.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="../js/bootstrap.js"></script>
  </body>
</html>

http://studiotierney.com/studiotierneycom/sample/container-sample.html

Make column fixed position in bootstrap

位置：固定;在Bootstrap容器中（不是容器流体）

0 个答案: