Question

我正在尝试对齐两个div，每个div都在Bootstrap列div中。我想将第一列中的那个对齐到右侧，将第二列中的那个对齐到左侧。里面的div是相对的，因此它们内部的内容可以绝对对齐。但即使删除这个定位也没有解决我的问题。我无法弄明白，因为它适用于我在列/ div中放置的纯文本，就像测试一样，但不在div上。

这是我的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上添加右侧或右侧的类，但它要么做了与我需要的不同，要么根本不起作用。

感谢任何可以帮助我的人吗？

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

从一个似乎已经创建了引导环境的小提琴中分叉出来：https://jsfiddle.net/Katrina_B/w4dt8qq7/
没有引导程序，如果上述情况不正确，并且有人知道如何向其添加引导程序：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下面，您可以再次使用bootstrap。尝试为左侧和右侧添加class="col-md-10 col-md-offset-2"的div 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预定义的左拉和拉右类来左右定位div。这可能对你有用。或者你可以使用css float：left和float：right属性。例： .leftFeature {float：left;}和.rightFeature {float：right}

我的Bootstrap div中的DIv不会正确对齐（但是文本确实）

4 个答案: