box-sizing：border-box;没有正常工作

Question

我正在尝试学习css和html5并陷入困境。我从w3schools获得了一个代码，如果我想在矩形形状中制作形状，我应该使用box-sizing：我的css代码中的border-box但它发生在这里 你能看看我的代码吗？

#modal_form input[type=text] {
    width: 320px;
	height: 40px;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}

<form id="modal_form">
        <input type="text" name="name" class="name" placeholder="Full Name"><br>
       <input type="text" name="email" class="email" placeholder="Email address"><br>
        <input type="text" name="phone" class="email" placeholder="Phone no"><br>
       <input type="text" name="website" class="email" placeholder="Your Website"><br>
        <input type="text" name="question" class="email" placeholder="Your Question??">
        <center><input  class="form-control" type="submit" name="contact" id="submit" value="Send Message"></center> 
      </form>

这是正确的，但在我的代码中它会像这样：

可能是我使用早期版本的bootstrap和其他版本的旧模板，那么什么是替代

提前致谢@ !!!

Answer 1

box-sizing用于操纵元素的碰撞盒，而不是视觉形状。

您正在寻找的内容可能是border-radius我认为bootstrap适用于您的输入。您应该可以通过将border-radius: 0添加到CSS代码来修复它。由于Stack上没有引导程序，因此输入不会呈现圆角。