html - Bootstrap 响应性向左对齐而不是向中间对齐

Question

这是我的 html:

<div class="gridrow" id="eventsrow">
   <div class="gridcard" id="eventcard" style="float:left;width:100%;height:100%;margin-bottom:0.5rem;background-color:white">
       <div class="event container">
          <div class="row">
             <div class="col">
                <span>Test Title</span>
             </div>
          </div>
       </div> 
    </div>
</div>

gridrow、eventsrow 或 gridcard 和 eventcard 和 目前没有 css事件。

当我在我的三星 Note8 上查看它时，一切看起来都很棒(居中)，但是当我在我的三星 Galaxy s8 上查看它时，它向左推而不是居中。

问题是什么？

Answer 1

你的问题是你使用 float left，这会将你的 div 元素推到左边而不是中间。你可以尝试将你的元素与文本对齐

.gridcard
{
text-align:center;
width:100%;
height:100%;
margin-bottom:0.5rem;
background-color:white;
}

我希望这能解决你的问题