html - 盒子尺寸 : border-box; is not properly working

Question

我正在尝试学习 css 和 html5，但卡在了 form 上。我从 w3schools 得到了一个代码，如果我想制作矩形形状的表格，我应该在我的 css 代码中使用 box-sizing: 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 上没有 Bootstrap ，因此输入不会呈现圆 Angular 。