Bootstrap 4输入框未在padding处终止导致对齐问题求助

嘿，我来帮你搞定这个对齐问题~ 先看你现在用的代码：

<div class="container"> 
  <div class="jumbotron" style="width:100%"> 
    <h1> ConfigTool Web Interface </h1> 
    <p> Edit the config variables here and click save. </p> 
  </div> 
  <div class="form-group row"> 
    <label class="col-2">Name:</label> 
    <input class="form-control col-10" type="text" /> 
  </div> 
</div>

你遇到的情况是输入框和上方的jumbotron左右不对齐，原因在于Bootstrap的.container类自带左右内边距，而你直接把带col-2和col-10的表单组放在了.container下，没有遵循栅格系统的嵌套规则——列（col-*）应该放在.row里面，.row的负margin会抵消.container的内边距，这样列就能和容器内的其他元素（比如jumbotron）对齐了。

下面给你几个靠谱的解决办法：

方法一：采用标准Bootstrap栅格嵌套结构（最推荐） #

把表单组嵌套在.row和col-12里面，同时给标签加上col-form-label来优化垂直对齐效果，代码如下：

<div class="container"> 
  <div class="jumbotron" style="width:100%"> 
    <h1> ConfigTool Web Interface </h1> 
    <p> Edit the config variables here and click save. </p> 
  </div> 
  <div class="row">
    <div class="col-12">
      <div class="form-group row"> 
        <label class="col-2 col-form-label">Name:</label> 
        <div class="col-10">
          <input class="form-control" type="text" /> 
        </div>
      </div>
    </div>
  </div> 
</div>

这样结构完全符合Bootstrap的设计规范，不仅能解决对齐问题，还能保证在不同屏幕尺寸下的响应式表现。

方法二：给表单区域单独加容器包裹 #

如果不想改太多结构，可以把表单组放在一个新的.container里，让它和jumbotron共享相同的内边距：

<div class="container"> 
  <div class="jumbotron" style="width:100%"> 
    <h1> ConfigTool Web Interface </h1> 
    <p> Edit the config variables here and click save. </p> 
  </div> 
  <div class="container">
    <div class="form-group row"> 
      <label class="col-2">Name:</label> 
      <input class="form-control col-10" type="text" /> 
    </div>
  </div> 
</div>

方法三：手动调整内边距（不推荐） #

要是你临时想快速解决，也可以给.form-group.row加上和.container一致的左右内边距（默认15px），但这种硬编码样式的方式不够灵活，不适合长期维护：

<div class="form-group row" style="padding-left: 15px; padding-right: 15px;"> 
  <label class="col-2">Name:</label> 
  <input class="form-control col-10" type="text" /> 
</div>

优先选方法一哦，这样后续扩展表单也更方便~

内容的提问来源于stack exchange，提问作者Tvde1