Question

我要复制此页面的设计：

我无法使用css3设计此页面。我如何制作这样的表格？我无法制作外部红色边框并在字段之间添加间距。

将表单的背景颜色设置为红色的正确方法是什么？

Answer 1

我希望这会有所帮助。仅用于Bootstrap4。它具有可帮助您调整间距和边距的类，而无需自定义CSS。

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

button[type="submit"] {
  margin: 0 auto;
}

.container {
  background-color: #C72027;
}

#submitForm {
  background-color: #F0AD4E;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container col-7 p-3">
  <form>
    <div class="form-row">
      <div class="form-group col-md-5 mb-3">
        <label class="sr-only" for="name">Name</label>
        <input type="text" class="form-control text-uppercase" id="name" placeholder="Enter name">
      </div>
      <div class="form-group col-md-5 mb-3">
        <label class="sr-only" for="email">Email address</label>
        <input type="email" class="form-control text-uppercase" id="email" placeholder="Enter email">
      </div>
      <div class="form-group col-md-5 mb-3">
        <label class="sr-only" for="phone">Phone number</label>
        <input type="tel" class="form-control text-uppercase" id="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="Enter mobile number">
      </div>
      <div class="form-group col-md-5 mb-3">
        <label class="sr-only" for="location">Location</label>
        <input type="text" class="form-control text-uppercase" id="location" placeholder="Enter Location">
      </div>
      <div class="form-group col-md-6 mb-3">
        <label class="sr-only" for="programSelect">Program</label>
        <select class="form-control text-uppercase" id="programSelect">
          <option>Select your program</option>
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
          <option>Option 4</option>
          <option>Option 5</option>
        </select>
      </div>
      <div class="col-12">
        <p class="text-white text-uppercase ">Please select your date of birth</p>
      </div>

      <div class="form-group col-4 mb-3">
        <label class="sr-only" for="day">Day</label>
        <select class="form-control text-uppercase" id="day">
          <option>DD</option>
          <option>01</option>
          <option>02</option>
          <option>03</option>
          <option>04</option>
          <option>05</option>
          <option>06</option>
          <option>07</option>
          <option>08</option>
          <option>09</option>
          <option>10</option>
          <option>11</option>
          <option>12</option>
          <option>13</option>
          <option>14</option>
          <option>15</option>
          <option>16</option>
          <option>17</option>
          <option>18</option>
          <option>19</option>
          <option>20</option>
          <option>21</option>
          <option>22</option>
          <option>23</option>
          <option>24</option>
          <option>25</option>
          <option>26</option>
          <option>27</option>
          <option>28</option>
          <option>29</option>
          <option>30</option>
          <option>31</option>
        </select>
      </div>
      <div class="form-group col-4 mb-3">
        <label class="sr-only" for="month">Month</label>
        <select class="form-control text-uppercase" id="month">
          <option>MM</option>
          <option>01</option>
          <option>02</option>
          <option>03</option>
          <option>04</option>
          <option>05</option>
          <option>06</option>
          <option>07</option>
          <option>08</option>
          <option>09</option>
          <option>10</option>
          <option>11</option>
          <option>12</option>
        </select>
      </div>
      <div class="form-group col-4 mb-3">
        <label class="sr-only" for="year">Year</label>
        <select class="form-control text-uppercase" id="day">
          <option>YYYY</option>
          <option>2018</option>
          <option>2017</option>
          <option>2016</option>
          <option>2015</option>
          <option>2014</option>
          <option>2013</option>
          <option>2012</option>
          <option>2011</option>
          <option>2010</option>
          <option>2009</option>
          <option>2008</option>
          <option>2007</option>
          <option>2006</option>
          <option>2005</option>
          <option>2004</option>
          <option>2003</option>
          <option>2002</option>
          <option>2001</option>
          <option>2000</option>
          <option>1999</option>
          <option>1998</option>
          <option>1997</option>
          <option>1996</option>
          <option>1995</option>
          <option>1994</option>
          <option>1993</option>
          <option>1992</option>
          <option>1991</option>
          <option>1990</option>
          <option>1989</option>
          <option>1988</option>
        </select>
      </div>
      <div class="form-check pl-4 mb-3">
        <input type="checkbox" class="form-check-input" id="allowCheck">
        <label class="form-check-label text-white" for="allowCheck">I allow NMIMS Distance Learning to contact me to provide details</label>
      </div>
      <button id="submitForm" type="submit" class="btn btn-warning mb-3 text-uppercase text-white">Send Enquiry</button>
    </div>
  </form>
</div>

Answer 2

我在JSfiddle上为您创建了一个示例表单

我使用了Bootstrap中的表格并将其包装在div中。然后，我使用background-color: red;来设置该div的样式。并不是您所需要的，但它是使用引导程序创建表单的起点。

我想使用Bootstrap和CSS3设计表单

2 个答案: