Bootstrap井不包含内容

Question

我会尝试使图像与边框线对齐。但我无法弄清楚。 （如下图所示）我不确定为什么井不能覆盖我的内容。不确定是什么问题。希望你能帮忙。

任何帮助将不胜感激！

.img-responsive {
    left: 15px;
    z-index: 14;
    position: absolute;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>
<div class="container">
  <div class="row">
    <div class="well">

      <div class="col-md-6">
        <img class="img-responsive" src="https://dummyimage.com/300x200/000/fff">
      </div>
      <div class="col-md-6">
        <p>arbitror cernantur amet multos ullamco dolore ad philosophari a ad est arbitrantur qui distinguantur illum graviterque laboris quis quorum non quid consectetur doctrina instituendarum esse sempiternum ad ad coniunctione possumus a ingeniis sint irure illum</p>
      </div>

    </div>
  </div>
</div>

Answer 1

我认为这个小修正可以完成工作

<div class="container">
<div class="well">
<div class="row">


<div class="col-md-6">
<img class="img-responsive" src="https://dummyimage.com/300x200/000/fff">
</div>
<div class="col-md-6">
<p>arbitror cernantur amet multos ullamco dolore ad philosophari a ad est arbitrantur qui distinguantur illum graviterque laboris quis quorum non quid consectetur doctrina instituendarum esse sempiternum ad ad coniunctione possumus a ingeniis sint irure illum</p>
</div>

</div>
</div>
</div>

你为什么要用这个css？

.img-responsive {
    left: 15px;
    z-index: 14;
    position: absolute;
}

根据你的评论我添加了一些小改动 将此添加到您的CSS

<style>
  .div-img-padLftZero{
    padding-left:0px;
  }

  </style>

然后让你的代码像这样

<div class="container">
<div class="well">
<div class="row">


<div class="col-md-6 div-img-padLftZero">
<img class="img-responsive" src="https://dummyimage.com/300x200/000/fff">
</div>
<div class="col-md-6">
<p>arbitror cernantur amet multos ullamco dolore ad philosophari a ad est arbitrantur qui distinguantur illum graviterque laboris quis quorum non quid consectetur doctrina instituendarum esse sempiternum ad ad coniunctione possumus a ingeniis sint irure illum</p>
</div>

</div>
</div>
</div>

现在它按照您的意愿左对齐