Question

在Bootstrap中，(gdb) monitor halt target state: halted target halted due to debug-request, current mode: Thread xPSR: 0x21000000 pc: 0x080006d8 msp: 0x2001ffe8 (gdb) monitor continue //Program doesn't continue有一些填充，我想要它。然而，水平形式内的东西似乎忽略了填充并被一直推到容器的边缘（我在这里为容器添加了一个边框以供说明）：

container-fluid

一个工作示例is on Bootply。

在该示例中，第一个警报符合预期。 <{1}}内的其他所有内容都太宽了。

现在，没有在Bootply中显示，但是如果我在表单中添加一个输入：

<div class="container-fluid" style="max-width:900px;border:1px solid black">
  <div class="alert alert-danger">Correct, obeys container-fluid padding.</div>
  <form class="form form-horizontal">
    <div class="form-group alert alert-danger">Too Wide</div>
    <div class="form-group panel panel-default">
      <div class="panel-heading">Too Wide</div>
      <div class="panel-body">Body</div>
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-default">Too far left</button>
    </div>
  </form>
</div>

输入正确填充，与警报和面板不同，我不明白。

如何让表单中的所有内容都遵循填充？这对我来说尤其重要，因为在小屏幕上它会将所有东西都推到边缘，看起来并不那么好。

我唯一能想到的就是将表单放在一个普通的form中，这没有效果。

我也通过在表单上手动设置填充来取得一些成功，但感觉不对，它也会破坏正确填充的输入元素。另外，它不太强大，我不能保证我的硬编码填充将匹配容器通常的填充，我无法控制。

Answer 1

//This will sort out your panels and alerts. (.less code)
//Or you could just put a .col-xs-12 on them.
.form-horizontal {
  > .panel,
  > .alert {
    margin: 0 @grid-gutter-width / 2; //(or just 15px if your using bootstrap dist)
  }        
}

然后对于您的输入组，只需使用标签上的col-sm-2，就像您上面所做的那样。

对于带有提交按钮的表单组，只需在其上添加col-xs-12。

原因是：。form-groups .form-horizontal内margin-left: -15px;收到<div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div>（与网格阴沟宽度相同）。

预期的设计是使用form-horizontal代替.row，然后在里面使用.cols。或者实现您选择适合您设计的方式。

参考：bootstrap forms horizontal

这样输入

<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-default">Sign in</button>
  </div>
</div>

按照这样的提交按钮

<div class="col-xs-12">
 <!-- alert here -->
</div>

如果您愿意，可以像这样发出提醒

 foreach (var val in users)
 {
    if (val.Any(x => x.UserException.Contains("QPZ") || x.UserException.Contains("QPR")))
    {
        listUsers.Add(
        val?.First( s => s.UserException.Contains("QPZ") || 
                         s.UserException.Contains("QPR")));
    }
    else
    {
        listUsers.AddRange(val);
    }
 }

Bootstrap水平形式忽略了容器流体填充

1 个答案: