Question

编辑：请参阅此问题底部的更新的JS Fiddle链接;我达到了预期的效果，但仍然感觉好像代码可以更清洁＆＃34;！

我已经尝试了一段时间的HTML / CSS，但我现在正在使用Twitter-Bootstrap构建我的第一个布局。这是我不得不提出的第一个问题，我非常感谢所有的投入。

我觉得我分享的代码部分可以清理干净。＆＃34;我已经让它看起来像一样就像我想要的那样，但我能帮助你，但我认为这是一种更容易达到我想要的方式。

请参阅此JS Fiddle。

我试图做的是：在md +尺寸的屏幕上有两排钻石，第一排4个，第二排3个。当用户在小屏幕或x小屏幕上时，钻石移动到三行，第一行为3行，第二行为2行，第三行为3行。我希望它们间隔很小。看到JS小提琴，我已经看到了我想要的md +屏幕，但问题是我似乎无法在小屏幕和x小屏幕上获得第1行和第3行以正确对齐第二排。

最好的方法是什么？我的方式似乎太乱了。我只是想使用HTML / CSS以防有人禁用JS。谢谢。：）

<section class="container-fluid diamonds">
<div class="row">
  <div class="col-md-10 col-md-offset-1">
      <div class="xsrow1">
        <div class="col-md-3 col-xs-6 xsright no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
        <div class="col-md-3 col-xs-6 no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
      </div>
      <div class="xsrow2">
        <div class="col-md-3 col-xs-4 no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
        <div class="col-md-3 col-xs-4 no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
      </div>
    </div>
  <div class="col-md-8 col-md-offset-2 mdrow2">
      <div class="xsrow2">
    <div class="col-md-4 col-xs-4 no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
      </div>
      <div class="xsrow3">
    <div class="col-md-4 col-xs-6 xsright no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
    <div class="col-md-4 col-xs-6 no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
    </div>
  </div>
</div>
</section>


.no-padding {
  padding: 0!important;
  padding-right: 3px!important;
  padding-left: 3px!important;
  margin: 0!important;
}

.diamonds {
  position: relative;
}

.diamonds img {
  width: 100%;
  height: auto;
}

@media (max-width: 991px) {
  .xsrow1 img, .xsrow3 img {
    width: 66.66667%!important;
    height: auto;
  }
  .xsright {
    text-align: right;
  }
}

@media (min-width: 992px) {
  .mdrow2 {
    position: absolute;
    top: 51%;
    left:0%;
    padding-left: 3%;
    padding-right: 3%;
  }
}

编辑：好吧，我想出了一个适合我的方法，虽然我仍觉得它很乱。更新JS Fiddle is here.如果有人有更简单的方法，请随时分享。：）

Answer 1

您可以使用预处理器，向标记添加更多语义类并删除布局类（col等），混合您希望这些类的样式。

Bootstrap新手;如何清理此代码+达到预期效果？

1 个答案: