行和列未正确对齐

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样式。在它们内部创建其他块来获得你想要的东西。请记住，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

Answer 2

您需要确保正确使用列，否则您的样式将覆盖所有内容。这个想法是，你根本不需要使用太多的CSS，因为它都在框架中。

重要的是，每一行必须有自己的容器，使用row作为类。这就是给它适当的结构和块性(！)的原因。

减少所有额外的样式，因为它是不需要的。Bootstrap列类本身就能很好地做到这一点。

下面是一个纯粹的示例，使用Bootstrap将行对齐，并将文本设置为主页的左侧或右侧。

示例：

<div class="row">
    <div class="col-md-6"><p>Your first row text item, left aligned by default.</p></div>
    <div class="col-md-6"><img src="your-image-file.jpg" class="img-responsive" alt="dont-forget-your-alt" /></div>
</div>
<div class="row">
    <div class="col-md-6"><img src="your-second-image-file.jpg" class="img-responsive" alt="really-dont-forget-your-alt" /></div>
    <div class="col-md-6 text-right"><p>Your second row text item, wich needs to be right aligned by adding the class to the p tag.</p></div>
</div>
etc...

Answer 3

在css中做到这一点：

.right{ float:right; margin-right:10px;}

和html：

        <div class="row">
        <div class="col-lg-6 imgleft"> <img class="img-responsive img3" src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph"> </div>
        <div class="col-lg-6 right">
            <p>ECOMMERCE FOCUS
                <br><span class="spanf">Decision Focused Dashboards To<br> Supercharge Your Ecommerce Business</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>

https://jsfiddle.net/DTcHh/24772/