Question

我知道在SO中多次询问过这个问题，但我无法找到问题的答案。我使用了这个引导程序并尝试连续两个六列。它按预期工作，但我想要实现的是我想要消除它们之间的差距。要查看我的意思，您可以查看here。我不想在这里覆盖bootstrap cols。我只想使用survey-extra添加的类。

HTML

<div class="container">
 <div class="row visit-redeem text-center">
   <h5>Visit Site To Redeem</h5>
 </div>
  <div class="row">
  <div class="col-xs-6 survey-extra">
    <h5>FROM OUR SPONSORS</h5>
    <span class="money-extra">$0.00</span>
  </div>

  <div class="col-xs-6 survey-extra">
    <h5>FREEBIES</h5>
    <span class="money-extra">$0.00</span>
  </div>
</div>
</div>

CSS

 .survey-extra {
        background: #1e90ff;
        color: #fff;
        padding: 5px;
        border-radius: 10px;
        text-transform: uppercase;
    }
.visit-redeem {
  background: #56a4da;
  margin-top: 5px;
  margin-bottom: 6px;
  color: #fff;
  padding: 5px;
  border-radius: 20px 20px 0 0;
  text-transform: uppercase;
}

我也试过CSS3 :nth-of-type() Selector但没有运气！

我只想用css做这件事。

Answer 1

尝试将survey-extra放在col-xs-6中。希望有所帮助

＆＃13;

.survey-extra {
    background: #1e90ff;
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    text-transform: uppercase;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="survey-extra">
          <h5>FROM OUR SPONSORS</h5>
          <span class="money-extra">$0.00</span>
      </div>
    </div>

    <div class="col-xs-6">
      <div class="survey-extra">
          <h5>FREEBIES</h5>
          <span class="money-extra">$0.00</span>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我能够在两个div之间放置一个可视空间，使用CSS将.survey-extra的宽度设置为百分比，然后给出其中一个div（使用：nth-of-type（）选择器）或两者都是边缘，如下：

.survey-extra {
    width: 45%;
    margin-right: 5px;
    background: #1e90ff;
    color: #fff;
    padding: 5px;
    border-radius: 10px;
    text-transform: uppercase;
}

在JSFiddle上查看。当然，您必须使用宽度百分比和边距来获得您想要的内容。

如果您不想使用边距，您还可以将宽度设置为百分比，然后使用浮动，如下所示：

.survey-extra {
    background: #1e90ff;
    color: #fff;
    width: 45%;
    padding: 5px;
    border-radius: 10px;
    text-transform: uppercase;
}

.survey-extra:nth-of-type(0) {
  float: left;
}

.survey-extra:nth-of-type(1) {
  float: right;
}

使用fiddle

上的浮动查看

Answer 3

我为我的问题找到了解决方案，我想将此分享给您以供将来参考。我所做的是添加$("#salary-s_wagePerday") or $("#salary-s_wageperday")并应用css。

CSS：

nth-of-type(2)

HTML：

.survey-extra {
    background: #1e90ff;
    color: #fff;
    padding: 5px;
    border-radius: 10px;
    text-transform: uppercase;
}

.survey-extra:nth-of-type(2) {
  width: 49%;
  float: right;
}

.visit-redeem {
  background: #56a4da;
  margin-top: 5px;
  margin-bottom: 6px;
  color: #fff;
  padding: 5px;
  border-radius: 20px 20px 0 0;
  text-transform: uppercase;
}

小提琴here

Answer 4

.survey-extra {
  display: inline-block;
  float: none;
  margin: 0 2% 2% 0;
  width: 49%;
}

.survey-extra:last-child {
  margin-right: 0;
}

如果您有多于一行，则可以将last-child替换为nth-child(2n)

Answer 5

无需更改css只需更改html，如下所示：

<div class="container">
    <div class="row visit-redeem text-center">
        <h5>Visit Site To Redeem</h5>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="survey-extra">
                <h5>FROM OUR SPONSORS</h5>
                <span class="money-extra">$0.00</span>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="survey-extra">
                <h5>FREEBIES</h5>
                <span class="money-extra">$0.00</span>
            </div>
        </div>
    </div>
</div>

在具有相同类并排的两个列div之间添加间隙

5 个答案: