输入和按钮不对齐

Question

我试图对齐输入框和按钮。

没有bootstrap css框架它工作正常，但是，当我添加bootstrap时，搜索按钮未对齐。

.container{
    height: 120px;
}
input, button{
    height: 100%;
}

https://jsfiddle.net/1am8uqwu/1/

我已经找到了一些补救措施，但我想了解发生这种情况的基本原因。

我的修正：

1. 我发现下面的修复特别有趣，因为输入和按钮元素没有填充开头。 lolwut？

   input, button{
     margin: 0;
     padding: 0;
   }
   

2. input, button{
     vertical-align: middle or top
   }
   

*注意错位是微妙的

Answer 1

该按钮似乎具有默认填充，并在其填充设置为0时与输入框对齐。

https://jsfiddle.net/1am8uqwu/14/

*{
    box-sizing: border-box;
}

.container{
    height: 120px;
}

input, button{
    height: 100%;
}

button {
    padding: 0;
}

Answer 2

您的按钮和输入包裹在.container div元素周围。

使用bootstrap会导致应用以下样式：

.container { 
margin-right: auto;
margin-left: auto;
}

因此，使用auto属性将内容集中在容器内。 如果没有引导程序，则不会应用样式，并且内容不会居中。

查看文档以获取更多信息：http://getbootstrap.com/css/#overview-container