html - 行和列未正确对齐

Question

我正在使用 Bootstrap ，并且有不同的行，每行包含 2 列。问题是它们没有正确对齐。这就是我要的

这就是我得到的

请告诉我这里有什么问题。我已经尝试了一个多小时，但不知何故它不起作用。

这是这个的CSS

    .container {
  text-align: center;
  width: 80%;
}

.first {
  background: rgb(0, 30, 58);
  color: white;
}

.span1,
.span2 {
  font-size: 36px;
  font-weight: bold;
}

.span1 {
  color: rgb(72, 174, 137);
}

[type="text"] {
  border-radius: 25px;
  padding-left: 5px;
}

[type="submit"] {
  color: white;
  background-color: rgb(72, 174, 137);
  border-radius: 25px;
  position: relative;
  margin-left: -25px;
}

.use {
  height: 85%;
  margin: 0 auto;
}

.box {
  border: 3px solid rgb(72, 174, 137);
  width: 55%;
  margin: 0 auto;
  max-height: 210px;
}

.para {
  text-align: left;
  margin-right: 0;
  padding-right: 0;
  padding-top: 15px;
}

.para strong {
  font-weight: 900;
  font-size: 16px;
}

.second {
  margin-bottom: 30px;
  border: 1px solid green;
  width: 10%;
}

.threebox {
  width: 90%;
  margin: 0 auto;
  padding-left: 70px;
}

.col-lg-4 {
  height: 40%;
}

.col-lg-4 > p {
  background-color: white;
  border: 2px solid white;
  border-top-color: green;
  width: 200px;
  height: 160px;
  box-shadow: 10px 10px 15px;
}

.positions {
  margin-top: 60px;
  position: relative;
  margin-bottom: -50px;
  z-index: 2;
}

.positions > h1 {
  font-size: 30px;
  font-weight: bold;
}

.spanf {
  font-size: 18px;
  font-weight: bold;
}

.features {
  text-align: center;
  padding-bottom: 40px;
  width: 100%;
  margin: 0 auto;
  background-color: rgb(242, 243, 245);
  height: 1500px;
  z-index: 1;
  padding-top: 120px;
  margin-bottom: 0;
}

.features .row {

  width: 65%;
  margin: 0 auto;
}

.features .row p {
  text-align: left;
  padding-left: 20px;
}

.features button {
  border-radius: 20px;
}

.features .row {
  margin-top: 40px;
}

.features img {
/*   width: 98%; */
/*   height: 98%; */
  left: 12px;
top: -12px;
box-shadow: -2px 2px 9px;
}

.features .row .col-lg-6 {
/*   padding-right: 15px; */
/*   padding-left: 2px; */
}

.imgright {
  position: relative;
  border: 3px solid rgb(72, 174, 137);
  top: 5%;
  width: 40%;
  padding-bottom: 0px;
  padding-right: 2px;
  padding-left: 0;
  margin-left: 20px;
  margin-top: 20px;
}

.img2 {
  position: relative;

/*   padding-bottom: 10px; */
}

.imgleft {
  position: relative;
  border: 3px solid rgb(72, 174, 137);
  width: 40%;
  top: 5%;
  margin-left: 10px;
  margin-top: 20px;
  padding: 0;
}

.img3 {
  position: relative;
  left:30px;
/*  top:-20px; */
/*   padding-bottom: 10px; */

}

.pillars {
  background-color: rgb(72, 174, 137);
  height: 350px;
  top: 0;
}

这是代码笔的链接 - codepen我已更新图像以正确显示错误。每行在不同的侧面都有图像和行因此行没有正确对齐，如图所示。

Answer 1

尽量不要更改 col-divs 样式。在其中创建其他 block 以获得您想要的东西。记住 col-class 有填充。

我会尝试类似的东西

<div class="row">
<div class="col-lg-6">
<div class="text-left">
<div class="bordered-box">
<img class="img-responsive img3" src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph">
</div>
</div>
</div>
<div class="col-lg-6">
<p>EASY TO UNDERSTAND<br><span class="spanf">Optimize Your Product & Category<br> Performance</span><br>
There are plenty of platforms that make it easy to capture data and analytics about your ecommerce site. But when it comes to understanding the data you've captured. It's not always clear what's important and where to make changes.<br>
<button>Join Now</button></p></div>
</div>

带边框的样式

.bordered-box{
display:inline-block;
border:3px solid #46ab86;;
}

这是jsfiddle