为什么Materialise CSS表单不包含在框中？

Question

如何在实现CSS的Bootstrap 4 http://v4-alpha.getbootstrap.com/components/forms/中创建一个表单。以下仅显示输入字段的下划线，而不是包含框？

<input placeholder="Placeholder" id="first_name" type="text" class="validate"> 
     <label for="first_name">First Name</label> 
    </div> 

Answer 1

您可以使用“！important”重写Materialise CSS样式。
我做了一个CodePen来演示相同的使用给定的标记。 （https://codepen.io/anon/pen/yzVXWN）
另请注意，我在CodePen中包含了Materialise CSS样式表来测试它。
您可以在开放<style>标签 之间闭头内这样复制并粘贴CSS：

<style> 
#first_name{ 
    display: block!important; 
    width: auto !important; 
    padding: .5rem!important; 
    border: 1px solid rgb(0,0,0); 
    transition: all 1s; 
    border-radius: .25rem!important; 
    box-shadow: none; 
} 

#first_name:focus{ 
    border-color: blue!important; 
} 
label{ 
    color:#9e9e9e!important; 
} 
</style> 

希望帮助:)