引导填充和边距问题

Question

我使用引导网格来构建响应式菜单和具有搜索表单的部分。但我不明白为什么布局中存在与边距和填充相关的问题，如您在此处看到的：http://jsfiddle.net/ya08jsfy/1/。

• 在标题区域中，徽标 h1 未在中心垂直对齐。

• 那么标题区和搜索区之间有一个空白，你知道为什么吗？向 .Search div 添加一些填充似乎可以解决这个问题，但为什么需要填充呢？为什么 .Search div 默认不显示在标题旁边？

• 然后在搜索表单中，我希望按钮旁边的输入没有任何空间，但它不起作用，而且即使使用 box-sizing:border-box，输入也不会占据整个宽度，因为黄色背景出现。

您知道如何以在其他部分中起作用的方式解决此问题，以使内容居中对齐，并在所有部分中使用相同的填充。

html:

<header>
    <div class="container">
     <div class="row">
        <div class="header_nav">
            <div class="col-xs-6 col-sm-3">
                <h1 class="header__logo">Logo</h1>
            </div>
            <div class="col-xs-6 col-sm-9">
                <a class="nav_mobile_btn hidden-sm hidden-md hidden-lg"><i class="fa fa-bars" aria-hidden="true"></i></a>
                <ul class="nav hidden-xs">
                    <li class="nav__item"><a href="">Item 1</a></li>
                    <li class="nav__item"><a href="">Item 2</a></li>
                    <li class="nav__item"><a href="">Item 3</a></li>
                    <li class="nav__item"><a href="">Item 1</a></li>
                    <li class="nav__item"><a href=""> Item 4</a></li>
                </ul>
            </div>
        </div>
     </div>
   </div>
</header>

<section class="Search">
  <h1>Search</h1>
  <form action="/signup" method="post">
    <div class="row">
        <p class="col-xs-10" style=background:yellow;>
            <input type="text" name="first_name">
        </p>
        <p class="col-xs-2">
            <button type="submit">Search</button>
        </p>
    </div>
  </form>
</section>

CSS：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input,textarea,select{
  display: block;
  padding: 15px;
  width: 100%;
  outline: 0;
  border: 0;
}

header{
  border-bottom: 1px solid red;
  background-color:orange;
}

.header_nav {
  display: flex;
  align-items: center;
}

.header__logo{
  color:green;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav__item {
  padding: 0 15px;
  a {
    font-weight: 600;
    font-size: em(15px);
    color: brown;

    &:hover {
      text-decoration: none;
    }
  }
  &:last-of-type{
    padding-right: 0;
  }
}

.nav_mobile_btn{
  font-size: em(30px);
  color:$greypp;
  float: right;
}

.Search{
  background-color: green;
  h1{
    color: #fff;
    text-align: center;
    font-size: 1em;
  }
}

button{padding:15px;}

Answer 1

Bootstrap css 带有一些默认边距和填充到标签，如 h1 到 h6 和 p。在您的情况下， h1 的边距顶部为 20 像素，底部为 10 像素，这就是徽标未垂直对齐的原因。您可以将标题和段落边距设置为 0 并覆盖引导样式。

为了正确对齐和调整输入内按钮的大小，请改用此代码。

<div class="input-group">
  <input type="text" class="form-control" placeholder="Search for...">
  <span class="input-group-btn">
    <button class="btn btn-secondary" type="button">Go!</button>
  </span>
</div>

Answer 2

1. 这会导致h1(Logo) 在顶部和底部具有不同的边距。解决方法很简单，只需为两者设置相同的边距即可。

   h1{
       margin-top:0px;
       margin-bottom:0px
   }
   

2. 标题区域和搜索部分之间的差距来自h1(Search)的边缘。解决方案是将h1(Search) 的边距设置为零。

   h1{
       margin-top:0px;
   }
   

3. 它会导致引导程序将每列设置为在左侧和右侧都有 15 像素的填充。解决方案是覆盖引导样式：

    [class*="col-"]{
        padding:0px;
   

如果您不想覆盖所有引导列，请创建自己的类。