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和event没有css。

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

问题是什么？

Answer 1

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

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

我希望这能解决你的问题

Answer 2

  <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-4">
               </div>
               <div class="col-4">
                  <span>Test Title</span>
               </div>
               <div class="col-4">
               </div>
            </div>
         </div>
      </div>
  </div>

它将整个页面分成3个相等的列，然后将您想要的内容放在中间。它适用于所有设备。

Bootstrap响应性与左侧而不是中间对齐

2 个答案: