html - 如何在不移动图像位置的情况下将图像上的整个文本移动到右侧？

Question

正在搜索但找不到我需要的答案，我很好。还在学习。希望有人可以帮助我。

例如，现在我的学习网站上显示的问题是：

我现在 的问题标题和整个段落在图像的左侧...

我希望将标题和整段内容移动到右侧而不移动图像上的位置以获得此结果：

我想得到这个结果

这是原始代码：

.intro-section {
  color: #fff;
  position: relative;
  z-index: 17;
  padding: 80px 0;
  margin-top: -86px;
  background: url(../images/img.jpg) no-repeat top center;
  background-size: cover;
}
.intro-section h3 {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 24px;
}
.intro-section .image-holder {
  margin-top: 50px;
  overflow: hidden;
}

<div class="intro-section">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h1>  title </h1>
        content paragraph xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
      </div>
    </div>
  </div>
</div>

希望能在这里得到解答，谢谢帮助。

标签： htmlcss

Answer 1

添加这个col-md-offset-6类col-md-6

 <div class="intro-section">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-md-offset-6">
                        <h1>  title </h1>
    
                     content paragraph xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                     xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                     xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                </div>
           </div>
      </div>
 </div>