css - Bootstrap well 没有覆盖内容

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>

现在它按照你想要的方式左对齐