html - 网络表单应用程序

Question

在我的 Web 表单中，右侧有一个空白区域，如何将其删除或调整面板大小？

我也尝试过面板padding和容器，但它不起作用。 marginwidth

.container {
  margin-top: 50px; 
}
    

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>

<div class="container"  >
  <div class="panel panel-primary" >
    <div class="panel-heading" >
      <h3 class="panel-title ">Personal Infomation</h3>
    </div>
    <div class="panel-body " >
      <br>
      <div id="p_info">
        <div class="row">
          <div class="col-md-6">
            <label class="control-label">First Name</label>
            <input class="form-control" id="first_name" >
          </div>
        </div>
        <div class="row" >
          <div class="col-md-6">
            <label class="control-label">Last Name</label>
            <input class="form-control" id="last_name" >
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <label class="control-label">Gender</label>
            <select class="form-control field" id="sel1" >
              <option disabled selected value> -- select an option -- </option>
              <option>Male</option>
              <option>Female</option>
            </select>
          </div> 
        </div>
        <div class="row">
           <div class="col-md-6">
            <label class="control-label">Date of Birth</label>
            <input type="date" name="bdaytime" class="form-control" id="DOB"   >
           </div>
        </div>
        <div class="row">
           <div class="col-md-6">
            <label class="control-label">Place of Birth</label>
            <input class="form-control" id="Place" >
           </div>
        </div>
       </div>
    </div>
  </div>
</div>  

我想从中删除此网络上的空白。为什么会这样显示让我知道。我想从中删除此网络上的空白。为什么会这样显示让我知道。我想从中删除此网络上的空白。为什么会这样显示让我知道。 我想删除标记的部分

Answer 1

Bootstrap 对.col-md-6类使用媒体查询，其中它从全宽变为半宽，屏幕大于 992 像素：

@media (min-width: 992px)
.col-md-6 {
    width: 50%;
}

您可以创建自己的 CSS 规则或使用内联样式（例如<div class="col-md-6" style="width:100%">）来覆盖此 Bootstrap 样式规则。

Answer 2

.container {
  margin-top: 50px; 
}

.three-col {
width: 50%;
}
    

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>

<div class="container"  >
  <div class="panel panel-primary" >
    <div class="panel-heading" >
      <h3 class="panel-title ">Personal Information</h3>
    </div>
    <div class="panel-body " >
      <br>
      <div id="p_info">
        <div class="row">
          <div class="col-md-6">
            <label class="control-label">First Name</label>
            <input class="form-control" id="first_name" >
          </div>
        </div>
        <div class="row" >
          <div class="col-md-6">
            <label class="control-label">Last Name</label>
            <input class="form-control" id="last_name" >
          </div>
        </div>
        <div class="row three-col">
          <div class="col-md-3">
            <label class="control-label">Gender</label>
            <select class="form-control field" id="sel1" >
              <option disabled selected value> -- select an option -- </option>
              <option>Male</option>
              <option>Female</option>
              <option>Other</option>
            </select>
          </div> 
        </div>
        <div class="row three-col">
           <div class="col-md-3">
            <label class="control-label">Date of Birth</label>
            <input type="date" name="bdaytime" class="form-control" id="DOB"   >
           </div>
        </div>
        <div class="row">
           <div class="col-md-6">
            <label class="control-label">Place of Birth</label>
            <input class="form-control" id="Place" >
           </div>
        </div>
       </div>
    </div>
  </div>
</div>  

Answer 3

Is this what you look for ?

.panel-body {
  padding-left: 0px;
}

<!DOCTYPE html>
<html>
<head>
<title></title>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <style>
  .container {
    margin-top: 50px; 
  }


  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" ></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>


</head>
<body>

<div class="container"  >
  <div class="panel panel-primary" >
    <div class="panel-heading" >
      <h3 class="panel-title ">Personal Infomation</h3>
    </div>
    <div class="panel-body " >
      <br>
      <div id="p_info">
        <div class="row">
          <div class="col-md-6">
            <label class="control-label">First Name</label>
            <input class="form-control" id="first_name" >
          </div>
        </div>
        <div class="row" >
          <div class="col-md-6">
            <label class="control-label">Last Name</label>
            <input class="form-control" id="last_name" >
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <label class="control-label">Gender</label>
            <select class="form-control field" id="sel1" >
              <option disabled selected value> -- select an option -- </option>
              <option>Male</option>
              <option>Female</option>
            </select>
          </div> 
        </div>
        <div class="row">
           <div class="col-md-6">
            <label class="control-label">Date of Birth</label>
            <input type="date" name="bdaytime" class="form-control" id="DOB"   >
           </div>
        </div>
        <div class="row">
           <div class="col-md-6">
            <label class="control-label">Place of Birth</label>
            <input class="form-control" id="Place" >
           </div>
        </div>
       </div>
    </div>
  </div>
</div>  
</body>
</html>