Question

它不必是引导程序4.我被困住并需要帮助。试图将页面分成2个部分。左侧有全宽bg图像。这就是问题，需要帮助css和html

我的HTML代码：

"""
WSGI config for demo project.

It exposes the WSGI callable as a module-level variable named ``application``.

For more information on this file, see
https://docs.djangoproject.com/en/1.9/howto/deployment/wsgi/
"""

image example

Answer 1

嘿我认为你需要添加一个类行来完美地划分你的内容：

<div class="row"> <div class="col-sm-6 bg"></div> <div class="col-sm-6"></div> </div>

如果您想在页面的左侧部分中使用背景图片，请使用：

background:url("your url of image"); background-size:cover;

通过这个，你可以得到一个背景图像和完全分割的左分区。

Answer 2

.left-bg-img{
    background-image: url("your image url");
    background-size: cover;
    background-repeat: no-repeat;
} 

<div class="row">
    <div class="col-sm-6 left-bg-img" style="text-align: center">
        <p>Left content goes here.</p>
    </div>
    <div class="col-sm-6" style="text-align: center">
        <p>Right content goes here.</p>
    </div>
</div>

Answer 3

没有引导程序的示例：

＆＃13;

body {
  padding: 0;
  margin: 0;
  background: #444;
  direction: rtl;
}

.split-container {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.split-item {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  
  width: 50%;
  padding: 3em 5em 6em 5em;
}

.split-right {
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
  -ms-flex-order: -1;
  order: -1;
  
  color: #7b5a9e;
  background: #fff;
}

.split-left {
  background: #7b5a9e;
  color: #fff; 
}

.split-image img {
  border: 5px solid rgba(0,0,0,0.2);
  width: 100%;
  height: auto;
  margin: 2em auto;
  border-radius: 50%;
  max-width: 100px;
  display: block;
}

.split-item h3 {
  text-align: center;
  margin: 0 0 2em 0;
  font-weight: 700;
}

.split-item p {
  text-align: center;
  margin: 0 auto;
  max-width: 500px;
  line-height: 1.5;
}

.split-item a {
  color: currentColor;
  display: block;
  text-align: center;
  margin: 1em 0 0 0;
  width: 100%;
}

＆＃13;

<div class="split-container">
  <div class="split-item split-left">
    <div class="split-image">
      <img src="http://upload.wikimedia.org/wikipedia/commons/8/89/William.IV.of.Great.Britain.JPG">
    </div>
    <h3>ויליאם הרביעי</h3>
    <p>
      ויליאם הרביעי (נולד בשם ויליאם הנרי; 21 באוגוסט 1765 - 20 ביוני 1837) 
      היה מלך הממלכה המאוחדת של בריטניה הגדולה ואירלנד ומלך הנובר מ-26 
      ביוני 1830 ועד יום מותו.
    </p>
    <a target="_blank" href="http://he.wikipedia.org/wiki/%D7%95%D7%99%D7%9C%D7%99%D7%90%D7%9D_%D7%94%D7%A8%D7%91%D7%99%D7%A2%D7%99,_%D7%9E%D7%9C%D7%9A_%D7%94%D7%9E%D7%9E%D7%9C%D7%9B%D7%94_%D7%94%D7%9E%D7%90%D7%95%D7%97%D7%93%D7%AA">קרא עוד</a>		
  </div>
  <div class="split-item split-right">
    <div class="split-image">
      <img src="http://upload.wikimedia.org/wikipedia/commons/b/ba/King_George_V_1911_color-crop.jpg">
    </div>
    <h3>ג'ורג' החמישי</h3>
    <p>
      ג'ורג' החמישי (3 ביוני 1865 - 20 בינואר 1936), 
      הידוע גם בשמו המלא ג'ורג' פרדריק ארנסט אלברט, היה מלך הממלכה 
      המאוחדת והדומיניונים הבריטים.
    </p>
    <a target="_blank" href="http://he.wikipedia.org/wiki/%D7%92%27%D7%95%D7%A8%D7%92%27_%D7%94%D7%97%D7%9E%D7%99%D7%A9%D7%99,_%D7%9E%D7%9C%D7%9A_%D7%94%D7%9E%D7%9E%D7%9C%D7%9B%D7%94_%D7%94%D7%9E%D7%90%D7%95%D7%97%D7%93%D7%AA">קרא עוד</a>
  </div>
</div>

＆＃13;

Answer 4

使用Bootstrap 4，这可行......

<section>
  <div class="side-image"></div>
  <div class="container">
    <div class="row">
      <div class="col-sm-6 ml-sm-auto">
        <p>Some content over to the right.</p>
      </div>
    </div>
  </div>
</section>

<style>
.section-with-side-image {
  position: relative;
}
.side-image {
  position:absolute;
  top:0;
  bottom:0;
  right: 50%;
  left: 0;
  background-image: url('http://placehold.it/900/');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

https://codepen.io/Gwapedwink/pen/JOgXJw

注意：您似乎忘记了列周围的.row。所以你会在我的例子中看到这一点。

第二次注意：我将.ml-sm-auto类添加到col-sm-6，因为它不需要填充或偏移，那不是Bootstrap 4的工作方式。

Bootstrap 4容器，全宽图像

4 个答案: