twitter-bootstrap 如何使具体化 CSS 按钮的宽度与 col s12 相同？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36933122/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Make a materialize CSS button's width same as col s12?
提问by Pratik Saha
I want to make the Submit button's length same as the input field above it.
我想让提交按钮的长度与其上方的输入字段相同。
<div class="row">
<div class="input-field col s12">
<input id="speciality" type="text" class="validate">
<label for="speciality">Speciality</label>
</div>
</div>
<div class="row">
<button class="btn waves-effect waves-light" type="submit" name="action">Search
<i class="material-icons right">search</i>
</button>
</div>
回答by ProDexorite
If your column which you have your input field in is limited to a certain width (in the way how the Bootstrap columns work), you can put the .btninside a column as well.
如果您的输入字段所在的列被限制为特定宽度（以 Bootstrap 列的工作方式），您也可以将其.btn放在列内。
After that, you can use the following CSS to make the width equal to the input field:
之后，您可以使用以下 CSS 使宽度等于输入字段：
.col.s12 > .btn {
width: 100%;
}
Of course if the buttonas an element does not bend to this CSS-rule, you can use <a class="btn">instead.
当然，如果buttonas 元素不符合此 CSS 规则，您可以<a class="btn">改为使用。
回答by Mateusz
Surround the button with a div with col s12classes and add btn-blockto the button:
用带有col s12类的 div 包围按钮并添加btn-block到按钮：
<div class="row">
<div class="col s12">
<button class="btn btn-block waves-effect waves-light" type="submit" name="action">Search
<i class="material-icons">search</i>
</button>
</div>
</div>
And add the following CSS:
并添加以下 CSS：
.btn-block {
width: 100%;
}
