Question

我尝试使用bootstrap创建一个分屏。我搜索其他来源，但没有找到解决方案。该计划是该网站有一个分屏，左侧和右侧有两张图片。左图上有几个链接。现在问题是： 1.左侧图片并非从左边距开始。我试着用左：0;没有帮助。我想让图片的高度完全等于屏幕尺寸。没有卷轴。现在高度是100％，为了看到全长我必须滚动。我尝试高度：自动，没有工作。 3.在左边的图片上，链接应该在图片的顶部，现在它在下面。我也尝试了url background img但是失败了。

请查看http://codepen.io/anon/pen/PZqy1Xp上的链接

      <div class="col-md-6">

          <img src="http://www122.lunapic.com/editor/working       
             /144980254379614?49319erww"> 
          <ul>
              <li>link1</li>
              <li>link2</li>
          </ul>
       </img>

     </div>
    <div class="col-md-6">
      <img src="http://www191.lunapic.com/do-not-
        link-here-use-hosting-instead/144978190397904?255757fw41"></img></div>
     </div>

  That's what I get. Any suggestions? Tks!

Answer 1

当我尝试编辑您的codepen示例时，这对我有用：

.col-md-6 {
  padding-left: 0px !important;
}

.container {
  width: 100% !important;
  padding-left:0px !important;
}

Answer 2

左图开始比div.container边距更右边的问题是bootstraps列系统为带有列类的元素添加了填充。

div.col-md-6 {
    padding: 0px
}

上面的CSS应该解决这个问题。对于垂直占据整个屏幕的图像，将图像设置为100vh（视图高度）。

img {
    height: 100vh;
}

Answer 3

如果您要使用网格，则必须从columns中删除左右填充，然后您可以使用背景图像完全填充屏幕的每一侧。

您可以使用属性“通配符”选择器（请参阅MDN Attribure Selectors）从列中删除填充，而不是单独向每个列添加类。

.row-full > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}

请参阅整页的工作代码段。

.leftside {
  background: url(http://www122.lunapic.com/editor/working/144980254379614?493195131) no-repeat;
  background-size: cover;
  background-position: center;
  height: 100Vh;
}
.leftside .text {
  position: absolute;
  top: 60%;
  left: 20%;
  font-size: 2em;
}
.leftside .text a {
  color: #fff;
  display: block;
}
.rightside {
  background: url(http://www191.lunapic.com/do-not-link-here-use-hosting-instead/144978190397904?2557574571) no-repeat;
  background-size: cover;
  background-position: center;
  height: 100Vh;
}
.row-full > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}
@media (max-width: 767px) {
  .leftside .text {
    top: 60%;
    left: 5%;
    font-size: 16px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row row-full">
    <div class="col-sm-6">
      <div class="leftside">
        <div class="text">
          <a href="#">Some Link</a>
          <a href="#">Some Link</a>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="rightside">
      </div>
    </div>
  </div>
</div>

使用Bootstrap拆分屏幕网页

3 个答案: