Bootstrap + Google Material Design

Question

在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時可以正確顯示表單。

Answer 1

據我所知，Bootstrap材料設計沒有考慮輸入組，但是您可以自定義它來滿足您的需求。 參見示例。

 $.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>