小型设备中的Bootstrap 4网格问题

时间:2018-04-27 06:42:32

标签: flexbox bootstrap-4

我的代码如下:

    public override void DidEnterBackground(UIApplication application)
    {
         var taskID = UIApplication.SharedApplication.BeginBackgroundTask(
           ()=> {
           if(SessionManager.session.Paired && SessionManager.session.Reachable)
           {
            Console.WriteLine("Start the background task.......");
            timer = NSTimer.CreateRepeatingScheduledTimer(20, UpdateUserInterface);
            UpdateUserInterface(timer);
            Console.WriteLine("Running out of time to complete you background task!");
            UIApplication.SharedApplication.EndBackgroundTask(taskID);
        }
        });
    }

CSS如下所示

<div class="row align-items-center">
  <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12">
    One of three columns
  </div>
  <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12">
   One of three columns
  </div>
</div>

当我办理登机手续或小型设备网格项目时,在上侧和下侧放置一些空间。截图附于下方 enter image description here

你可以看到空间。我想制作没有空间的div。 我怎么能?

1 个答案:

答案 0 :(得分:1)

&#13;
&#13;
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div style="height: 200px;background-color: sandybrown;" class="d-flex align-items-center justify-content-center">
    <div class="row no-gutters d-flex bg-primary">
      <div class="col-12 col-md-6 bg-info">on small 12-cols and medium or above 6-cols</div>
      <div class="col-12 col-md-6 bg-warning">on small 12-cols and medium or above 6-cols</div>
    </div>
</div>
&#13;
&#13;
&#13;

如果您不想填充,仅在小屏幕上没有边距,则可以在media query中使用scss

@media (max-width: 576px) { 
      margin: 0px; padding: 0px 
}