Bootstrap 不用网格系统，使表单标签和控件位于同一行，并修改控件宽度

之前做个人网站的 v2.0.0 更新，应用 Bootstrap 的表单样式时遇到了个问题，标签与控件不在同一行。

去网上搜解决办法，有用网格系统的，有给 label 标签的 class 加上 form-inline 的，前者较繁琐，后者试了似乎没效果。所以我这里选择通过覆盖 Bootstrap 的 CSS 来实现，于是我打开开发者模式查看 form-control 的 CSS。

可以看到问题出在 display: block; 和 width: 100%; 上，前者让控件显示为块级元素，后者把宽度设为 100%，所以把这俩属性的值改掉就行了。

/* 注意一定要在 Bootstrap 原样式之后引入样式或者加上 !important，不然会被 Bootstrap 原样式覆盖 */

.form-control {
    display: inline;
    width: auto;
    max-width: 100%; /* 防止控件宽度超出屏幕 */
}

/* 注意：像 .form-control-lg、.form-control-sm 等 class 和 .form-control 名字不同，可以用 [class^="form-control"] 选择器来选中它们 */

[class^="form-control"] {
    display: inline;
    width: auto;
    max-width: 100%;
}

搞定。