Question

我想将图像上的位置设置为Bootstrap容器内外的一半左右。

我有一个带ROW的Bootstrap容器，里面有COL-MD-8个PULL-RIGHT类。它运作正常。现在我想将COL-MD-4中的图像添加到容器的左侧，但是图像的左边缘位于容器的外边缘到屏幕的边缘。这是一个示例HERE

HTML

<div class="aboutus">
    <div class="container">
        <div class="row">
            <div class="col-md-8 text pull-right">
                <h4>Title</h4>
                <p>Text Text text</p>
            </div>
        </div>
    </div>
</div>

CSS

.aboutus {
  margin-top: 80px;
  width: 100%;
  position: relative;
  background-color: #23BBEC;
}

.aboutus > div > div > .text {
  color: #FFF;
}

.aboutus > div > div > .text > h4 {
  display: inline-block;
  margin-top: 60px;
  padding-bottom: 8px;
  border-bottom: 2px solid #FFF;
}

.aboutus > div > div > .text > p {
  margin-top: 15px;
  margin-bottom: 60px;
}

Answer 1

这里需要听起来像伪元素。

Codepen Demo

＆＃13;

.aboutus {
  margin-top: 80px;
  background-color: #23BBEC;
  overflow: hidden;
}
.aboutus > .container > .row > .text {
  color: #FFF;
}
.aboutus > .container > .row > .text h4 {
  display: inline-block;
  margin-top: 60px;
  padding-bottom: 8px;
  border-bottom: 2px solid #FFF;
}
.aboutus > .container > .row > .text > p {
  margin-top: 15px;
  margin-bottom: 60px;
}
.right {
  background: #000;
  position: relative;
}
.right::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  margin-right: 25px;
  height: 100%;
  width: 50vw;
  background: #f00;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="aboutus">
  <div class="container">
    <div class="row">
      <div class="col-md-8 text pull-right right">
        <h4>Title</h4>
        <p>Text Text text</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

容器外的图像

1 个答案: