为什么使用bootstrap在html表单之间出现下划线？

时间：2017-05-25 10:18:04

标签： html twitter-bootstrap angular-ui-bootstrap

这是代码。  实际上表格之间有一条线。 它正在受到破坏。 我该怎么做才能删除它？

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div>
    <div ng-show="click.add" class="container">
      <form name="addSample" class="form-horizontal" ng-submit="add()">
        <fieldset>
          <legend>Form to Add a Sample</legend>
          <div class="form-group">

            <label class="control-label col-xs-4" for="name">Sample Name:</label>
            <div class="col-xs-8">
              <p>
                <input class="form-control" type="text" name="name" required placeholder="Name of the sample" ng-model="sample.name" />
              </p>
            </div>
            <br>
            <label class="control-label col-xs-4" for="customer">Customer:</label>
            <div class="col-xs-8">
              <p>
                <input class="form-control" type="text" name="customer" required placeholder="Customer" ng-model="sample.custName" />
              </p>
            </div>
            <br>
            <label class="control-label col-xs-4" for="form">Form:</label>
            <div class="col-xs-8">
              <p>
                <input class="form-control" type="text" name="form" placeholder="Form" ng-model="sample.form" />
              </p>
            </div>
            <br>
            <label class="control-label col-xs-4" for="size">Size:</label>
            <div class="col-xs-8">
              <p>
                <input class="form-control" type="text" name="size" placeholder="Size" ng-model="sample.size" />
              </p>
            </div>
            <br>

            <label class="control-label col-xs-4" for="stamping">Stamping:</label>
            <div class="col-xs-8">
              <p>
                <input class="form-control" type="text" name="stamping" placeholder="Stamping" ng-model="sample.stamping" />
              </p>
            </div>
            <br>
            <label class="control-label col-xs-4" for="toBeReturned">Is To Be Returned?</label>

            <div class="col-xs-8">
              <p>
                <input type="radio" name="toBeReturned" ng-model="sample.toBeReturned" value="true">Yes
                <input type="radio" name="toBeReturned" ng-model="sample.toBeReturned" value="false">No
              </p>
            </div>
            <br>

            <label class="control-label col-xs-4" for="receivedDate">Received Date:</label>
            <div class="col-xs-8">
              <p>
                <input class="form-control" type="date" name="receivedDate" placeholder="Received Date" ng-model=" sample.receivedDate" />
              </P>
            </div>
            <br>

            <label class="control-label col-xs-4" for="receivedDate">Status:</label>
            <div class="col-xs-8">
              <p>
                <input class="form-control" type="text" placeholder="Status" ng-model="sample.status" />
                <br>
              </p>
            </div>

            <br>

            <label class="control-label col-xs-4" for="receivedDate">Description:</label>
            <div class="col-xs-8">
              <p>
                <textarea class="form-control" placeholder="Describe the sample" rows="6" cols="50" ng-model="sample.sampleDescription"></textarea>
              </P>
            </div>

            <br>
            <br>
            <div class="modal-footer">
              <p>
                <button type="submit" class="btn btn-default">Save</button>
                <button type="button" class="btn btn-default" ng-click="click.add=false">Cancel</button>
              </p>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

任何人都能帮助我吗？ 我的代码有问题吗？ 以下是plunker链接：http://plnkr.co/edit/CJ5mn2?p=preview

2 个答案:

答案 0 :(得分：1)

来自modal-footer div的边框，所以你需要清除浮动

.modal-footer{
  clear: both;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

<body>
    <div>
  <div ng-show="click.add" class="container">
    <form name="addSample" class="form-horizontal" ng-submit="add()">
      <fieldset>
        <legend>Form to Add a Sample</legend>
        <div class="form-group">

          <label class="control-label col-xs-4" for="name">Sample Name:</label>
          <div class="col-xs-8">
          <p>
          <input class="form-control" type="text" name="name" required placeholder="Name of the sample" ng-model="sample.name" />
          </p>
          </div>
          <br>
          <label class="control-label col-xs-4" for="customer">Customer:</label>
          <div class="col-xs-8">
          <p>
          <input class="form-control" type="text" name="customer" required placeholder="Customer" ng-model="sample.custName" />
          </p>
          </div>
          <br>
          <label class="control-label col-xs-4" for="form">Form:</label>
          <div class="col-xs-8">
          <p>
          <input class="form-control" type="text" name="form" placeholder="Form" ng-model="sample.form" />
          </p>
          </div>
          <br>
          <label class="control-label col-xs-4" for="size">Size:</label>
          <div class="col-xs-8">
          <p>
          <input class="form-control" type="text" name="size" placeholder="Size" ng-model="sample.size" />
          </p>
          </div>
          <br>

          <label class="control-label col-xs-4" for="stamping">Stamping:</label>
          <div class="col-xs-8">
          <p>
          <input class="form-control" type="text" name="stamping" placeholder="Stamping" ng-model="sample.stamping" />
          </p>
          </div>
          <br>						
          <label class="control-label col-xs-4" for="toBeReturned">Is To Be Returned?</label>

          <div class="col-xs-8">
          <p>
          <input type="radio" name="toBeReturned" ng-model="sample.toBeReturned" value="true">Yes
            <input type="radio" name="toBeReturned" ng-model="sample.toBeReturned" value="false">No
            </p>
            </div>
            <br>

          <label class="control-label col-xs-4" for="receivedDate">Received Date:</label>
          <div class="col-xs-8">
          <p>
          <input class="form-control" type="date" name="receivedDate" placeholder="Received Date" ng-model=" sample.receivedDate"/>
          </P>
          </div>						
          <br>

          <label class="control-label col-xs-4" for="receivedDate">Status:</label>
          <div class="col-xs-8"> 
          <p>
          <input class="form-control" type="text" placeholder="Status" ng-model="sample.status" /><br>
          </p>
          </div>

          <br>

          <label class="control-label col-xs-4" for="receivedDate">Description:</label> 
          <div class="col-xs-8">
          <p>
          <textarea class="form-control" placeholder="Describe the sample" rows="6" cols="50" ng-model="sample.sampleDescription"></textarea>
          </P>
          </div>

          <br>
          <br>
          <div class="modal-footer">
            <p>
          <button type="submit" class="btn btn-default">Save</button>
          <button type="button" class="btn btn-default"
            ng-click="click.add=false">Cancel</button>
          </p>
          </div>
        </div>
      </fieldset>
    </form>
  </div>
</div>
</body>
</html>

答案 1 :(得分：0)

我猜你没有关闭div标签。

</P>
                        </div>
                        </div>
                        <br>
                        <br>
                        <div class="modal-footer">
...
相关问题
最新问题