Question

大家晚上。

我目前正在设计一个非常基本的用户仪表板。我正在使用Bootstrap框架来简化这个过程。我在整个项目中使用了GRID系统。没什么复杂的。只是基本的网格。

这是我到目前为止所做的Image

所以你可以看到问题所在。我完全没有关于如何解决这个问题的想法。我不喜欢WHITSPACES。你看this我希望他们都能连接起来。甚至可以做我想做的事情吗？

我已经尝试搞乱边缘，但那会破坏网站的响应能力。任何想法或建议都非常感谢。

    <div class="row no-pad">
   <div class="col-sm">
      <div class="tile" id="tile1">
         <div class="tiletit">
            <p class="titleend">First Tile</p>
         </div>
         <div class="tilebody">
            <img src="https://www.picgifs.com/avatars/avatars/alcohol/avatars-alcohol-093831.jpg" alt="..." class="rounded-circle">
         </div>
         <br/>
         <h3 class="titleend text-center">Its your time <br> To have a drink!</h3>
      </div>
   </div>
   <div class="col-sm ml-auto">
      <div class="tile" id="tile2">
         <h2 class="text-center" id="datetime">Monday, 31</h2>
         <br/>
         <h2 class="text-center" id="datetimee">7: 30</h2>
      </div>
   </div>
   <div class="col-sm">
      <div class="tile" id="tile3">
         <div class="tiletit">
            <p class="titleend">First Tile</p>
         </div>
         <div class="tilebody">
            <img src="https://www.picgifs.com/avatars/avatars/alcohol/avatars-alcohol-093831.jpg" alt="..." class="rounded-circle">
            <h3 class="titleend text-center">Time to <br> Make a &nbsp;<i>change</i></h3>
         </div>
      </div>
   </div>
   <div class="col-sm ml-auto">
      <div class="tile" id="tile2">
         <h2 class="text-center" id="datetime">Monday, 31</h2>
         <br/>
         <h2 class="text-center" id="datetimee">7: 30</h2>
      </div>
   </div>
</div>

所以是的，代码块生成了第一行的tile，我只是再次使用相同的代码来获取第二行

提前致谢

Bootstrap网格修复

0 个答案: