Question

我正在尝试使用bootstrap 3创建一个表单，并且所有标签都居中。如果我有

，它可以正常工作

<body>
  <div style="width:80%; padding:20%">
    <form>
      form stuff
    </form>
  </div>
</body>

但如果它在标签内，它会对齐输入/选择栏中心的所有文字，如

这就是我想要它的样子

对于大量代码感到抱歉。没有它，我无法再出现这个问题。选择栏就像剩下的代码一样少。

<!DOCTYPE html>
<html>
  <head>
    <title>TD Notes</title>
    <link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel = "stylesheet">

    <link rel="stylesheet" href="./styles.css">
    <script src='./node_modules/jquery/dist/jquery.min.js'></script>
    <script>window.$ = window.jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script>
  </head>
  <body style="background-color: white; height: 100%; width: 100%; text-align: center">

    <script src="jscolor.js"></script>
    <div id="navBar" class="container" style="background-color: black; height: 30px; width: 100%" >
      <ul class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a data-toggle="tab" href="#Body">Body</a></li>
        <li><a data-toggle="tab" href="#AAC">AAC</a></li>
        <li><a data-toggle="tab" href="#TPMS">TPMS</a></li>
        <li><a data-toggle="tab" href="#BCM">BCM</a></li>
        <li><a data-toggle="tab" href="#GBCM">GBCM</a></li>
        <li><a data-toggle="tab" href="#MSM">MSM</a></li>
        <li><a data-toggle="tab" href="#RX">RX</a></li>
        <li><a data-toggle="tab" href="#THC">THC</a></li>
        <li><a data-toggle="tab" href="#TX">TX</a></li>
        <li><a data-toggle="tab" href="#UID">UID</a></li>
        <li><a data-toggle="tab" href="#UPE">UPE</a></li>
        <li><a data-toggle="tab" href="#NewProb">New Problem</a></li>
      </ul>
    </div>
    <div id="content" style="width: 80%; padding-left: 20%">
      <div class="tab-content" style="width: 100%; height: 100%">
        <div class="tab-pane fade in active" id="Body" style="width=100%"></div>
        <div  class="tab-pane fade" id="AAC"></div>
        <div class="tab-pane fade" id="TPMS"></div>
        <div class="tab-pane fade" id="BCM"></div>
        <div class="tab-pane fade" id="GBCM"></div>
        <div class="tab-pane fade" id="MSM"></div>
        <div class="tab-pane fade" id="RX"></div>
        <div class="tab-pane fade" id="TX"></div>
        <div class="tab-pane fade" id="THC"></div>
        <div class="tab-pane fade" id="UID"></div>
        <div class="tab-pane fade" id="UPE"></div>
        <div class="tab-pane fade" id="NewProb">
          <form>
            <fieldset class="form-group">
              <label for="lineType" class="control-label">Line Type</label>
              <select class="form-control" id="lineType">
                <option>Body</option>
                <option>AAC</option>
                <option>TPMS</option>
                <option>BCM</option>
                <option>GBCM</option>
                <option>MSM</option>
                <option>RX</option>
                <option>TX</option>
                <option>THC</option>
                <option>UID</option>
                <option>UPE</option>
              </select>
            </fieldset>

            <fieldset class="form-group">
              <label for="testerType" class="control-label">Tester Type</label>
              <input class="form-control" id="testerType">
            </fieldset>

            <fieldset class="form-group">
              <label for="productType" class="control-label">Product Type</label>
              <input class="form-control" id="productType">
            </fieldset>

            <fieldset class="form-group">
              <label for="partNumber" class="control-label">Part Number</label>
              <input class="form-control" id="partNumber">
            </fieldset>

            <fieldset class="form-group">
              <label for="stepNumber" class="control-label">Step Number</label>
              <input class="form-control" id="stepNumber">
            </fieldset>

            <fieldset class="form-group">
              <label for="stepName" class="control-label">Step Name</label>
              <input class="form-control" id="stepName">
            </fieldset>

            <fieldset class="form-group">
              <label for="Other" class="control-label">Other (Automation, OPUI, Scanners, etc.)</label>
              <textarea class="form-control" id="other"></textarea>
            </fieldset>

            <fieldset class="form-group">
              <label for="problem" class="control-label">Problem</label>
              <textarea class="form-control" id="problem"></textarea>
            </fieldset>

            <fieldset class="form-group">
              <label for="counterMeasure" class="control-label">Countermeasure</label>
              <textarea class="form-control" id="countermeasure"></textarea>
            </fieldset>

            <fieldset class="form-group">
              <label for="engineer" class="control-label">Engineer</label>
              <input class="form-control" id="engineer">
            </fieldset>

            <fieldset class="form-group">
              <label for="date" class="control-label">Date</label>
              <input class="form-control" id="date">
            </fieldset>

            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
        </div>
      </div>
    </div>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>    
  </body>
</html>

bootstrap表单没有按预期工作

0 个答案: