我的Bootstrap div中的DIv无法正确对齐（但文本可以对齐）

Question

我正在尝试对齐两个div，每个div都在Bootstrap列div内。 我想将第一列中的一个右对齐，并将第二列中的一个左对齐。 内部的div是相对放置的，因此内部的内容可以完全对齐。 但是，即使取消该定位也无法解决我的问题。 我无法弄清楚，因为它适用于我放置在columns / divs中的纯文本，就像测试一样，但不适用于divs。

这是我的html：

<div class="container">
  <div class="row">
    <div class="leftFeature col-md-6">TESTTEXT<br>
      <div class="blockFeature">
         [types field='square-feature-image' size='full'][/types]
         <div class="blockFeatureOverlay"></div>
         <div class="blockFeatureText">
            <h2>[types field='front-page-feature-tagline'][/types]</h2>
            <h3>[types field='tag-line'][/types]</h3>
         </div>
      </div>
    </div>
    <div class="rightFeature col-md-6">TESTTEXT<br>
      <div class="blockFeature">
         [types field='square-feature-image' size='full'][/types]
         <div class="blockFeatureOverlay"></div>
         <div class="blockFeatureText">
            <h2>[types field='front-page-feature-tagline'][/types]</h2>
            <h3>[types field='tag-line'][/types]</h3>
         </div>
       </div>
    </div>
  </div>
</div>

这是我的CSS：

.leftFeature {
  background-color:#F9D069;
  text-align:center!important;
}

.rightFeature {
  background-color:#B6DEFF;
  text-align:center!important;
}

.col-sm-6 {padding:0;}

.blockFeature {
  width:80%;
  background-color:#7F9FA1;
  background-size:100%;
  line-height:0;
  position:relative; /*removing this rule did not fix my issue */
}

.blockFeatureOverlay {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-color:rgba(0, 0, 0, 0.25);
  /*background-color:rgb(158,84,6, 0.25);*/
}

.blockFeature a {
  text-decoration:none;
}

.blockFeature img {
  width:100%;
  height:auto;
}

.blockFeatureText {
  position:absolute;
  bottom:20px;
  left:20px;
}


.blockFeatureText h2 {
  font-size:2.4em;
  font-weight:700;
  color:#fff;
  text-transform:uppercase;
  margin-bottom:10px!important;
  line-height:100%!important;
  text-align:left;
}

.blockFeatureText h3 {
  font-size:1.2em;
  font-weight:300;
  color:#fff;
  text-transform:uppercase;
  margin-bottom:0!important;
  line-height:100%!important;
  text-align:left;
}

这是我所得到的代表： http : //imgur.com/a/LekqV

但这就是我想要的： http : //imgur.com/a/ER1kB

（可能）确实很明显。 但是经过24小时的混乱之后，我似乎无法修复它。 我曾尝试在左手div上添加text-right或pull-right类，但是它执行的功能与我需要的有所不同，或者根本不起作用。

谢谢任何可能帮助我的人？

编辑：这是我创建的两个小提琴

1. 从一个似乎已经创建了引导环境的小提琴中分叉： https : //jsfiddle.net/Katrina_B/w4dt8qq7/

2. 一个没有引导程序的服务器，以防万一以上内容不正确，并且有人更好地知道如何向其中添加引导程序： https : //jsfiddle.net/Katrina_B/c4kxa06s/

我对Bootstrap完全陌生，很少使用Jfiddle，因此如果我做得不正确，就深表歉意。 无论如何，在任何一个例子中，div都不是我期望的或希望他们做的。

Answer 1

简单，您应该使用bootstrap pull-left和pull-right类来对齐div

<div class="leftFeature col-md-6 pull-left">TESTTEXT<br> .... </div>

<div class="rightFeature col-md-6 pull-right">TESTTEXT<br>....</div>

Answer 2

.leftFeature .blockFeature {
   float: right;
 }

这种风格可能会使您完整的div正确

Answer 3

在具有类col-md-6的div下方，您可以再次使用引导程序。 尝试添加一个div class="col-md-10 col-md-offset-2"的左侧，和右侧class="col-md-10"

<div class="container">
  <div class="row">
    <div class="leftFeature col-md-6">TESTTEXT<br>
      <div class="col-md-10 col-md-offset-2>
        <div class="blockFeature">
          [types field='square-feature-image' size='full'][/types]
          <div class="blockFeatureOverlay"></div>
          <div class="blockFeatureText">
            <h2>[types field='front-page-feature-tagline'][/types]</h2>
            <h3>[types field='tag-line'][/types]</h3>
          </div>
        </div>
      </div>
    </div>
    <div class="rightFeature col-md-6">TESTTEXT<br>
      <div class="col-md-10">
        <div class="blockFeature">
          [types field='square-feature-image' size='full'][/types]
          <div class="blockFeatureOverlay"></div>
          <div class="blockFeatureText">
            <h2>[types field='front-page-feature-tagline'][/types]</h2>
            <h3>[types field='tag-line'][/types]</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 4

您应该使用bootsrap预定义的pull-left和pull-right类来左右定位div。 这可能为您工作。 或者，您可以使用css float：left和float：right属性。 示例：.leftFeature {float：left;}和.rightFeature {float：right}