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/

行和列未正确对齐

3 个答案: