Bootstrap + 谷歌材料设计答案

【问题标题】：Bootstrap + Google Material DesignBootstrap + 谷歌材料设计
【发布时间】：2015-11-16 02:37:24
【问题描述】：

在使用带有 Google Material Design 的 Bootstraps“带下拉菜单的按钮”模板时，我得到一个高度不同的文本字段和一个按钮，并且没有对齐。

应该如何：http://getbootstrap.com/components/#input-groups-buttons-dropdowns

相反，我得到了这个：

<div class="input-group">
    <input class="form-control" type="text" placeholder="Placeholder">
    <span class="input-group-btn">
        <button class="btn btn-default">Go!</button>
    </span>
</div>

我将如何解决这个问题？我已经确定从项目中删除 GMD 时表单可以正确显示。

【问题讨论】：

“Google Material Design”是指（理论上）实现指南的特定样式表吗？
您的 HTML 显示 Go!，但您的图片显示 GO!...不要骗我们，您在隐瞒一些事情：P
你在用fezvrasta.github.io/bootstrap-material-design吗？

标签： css twitter-bootstrap material-design

【解决方案1】：

据我所知，Bootstrap Material Design 没有考虑输入组，但您可以对其进行自定义以满足您的需求。见例子。

$.material.init()

.container .input-group .form-control {
  height: 40px;
  box-shadow: none;
  outline: none;
  border: none;
  border-bottom: 2px solid #ccc;
}
.container .input-group-btn .btn-custom {
  height: 40px;
  box-shadow: none;
  outline: none;
  border: none;
  border-bottom: 2px solid #009688;
}
.container .input-group .form-control:focus,
.container .input-group .form-control:hover {
  outline: none;
  box-shadow: none;
  border: none;
}
.container .input-group-btn .btn-custom:focus,
.container .input-group-btn .btn-custom:hover {
  outline: none;
  box-shadow: none;
}
/*Standard*/

.input-group-btn .btn-custom-og {
  height: 40px;
  box-shadow: none;
  outline: 0;
}
.input-group-btn .btn-custom-og:focus {
  box-shadow: none;
  outline: none;
}
.input-group .form-control.standard {
  height: 40px;
  box-shadow: none;
  outline: none;
  border: 1px solid #ccc !important;
}
.input-group .form-control.standard:focus {
  box-shadow: none;
  outline: none;
  border: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/ripples.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/material.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<hr>
<div class="container">
  <div class="input-group">
    <input class="form-control" type="text" placeholder="Placeholder"> <span class="input-group-btn">
        <button class="btn btn-default btn-custom">Go!</button>
    </span>

  </div>

  <hr>
  <div class="input-group">
    <input class="form-control standard" type="text" placeholder="Placeholder"> <span class="input-group-btn">
        <button class="btn btn-default btn-custom-og">Go!</button>
    </span>

  </div>

</div>
<hr>

【讨论】：