Question

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

我已经尝试padding和margin也width用于面板和容器，但是它不起作用。

.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>

我要删除此网站上的空白。为什么会这样显示让我知道。我要删除此网站上的空白。为什么会这样显示让我知道。我要删除此网站上的空白。为什么会这样显示让我知道。 I want to remove marked part

Answer 1

Bootstrap对 .col-md-6 类使用媒体查询，它从全角变为半角，屏幕大于992px：

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

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

Answer 2

这是您要寻找的吗？

.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>

Answer 3

.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>

网络表格应用

3 个答案: