表单进入nav-tab引导程序4的CSS问题

Question

我之所以来找你，是因为我的引导框架有问题。 确实，我想要一个页面上有4个标签（导航标签） 这是这些标签的代码：

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    </li>
</ul>

完成此操作后，我将创建内容标签，其中将包含每个标签的代码：

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <form>
            <div class="form-row">
                <div class="form-group col-md-6">
                <label for="inputEmail4">Email</label>
                <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
                </div>
                <div class="form-group col-md-6">
                <label for="inputPassword4">Password</label>
                <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
                </div>
            </div>
            <div class="form-group">
                <label for="inputAddress">Address</label>
                <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
            </div>
            <div class="form-group">
                <label for="inputAddress2">Address 2</label>
                <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                <label for="inputCity">City</label>
                <input type="text" class="form-control" id="inputCity">
                </div>
                <div class="form-group col-md-4">
                <label for="inputState">State</label>
                <select id="inputState" class="form-control">
                    <option selected>Choose...</option>
                    <option>...</option>
                </select>
                </div>
                <div class="form-group col-md-2">
                <label for="inputZip">Zip</label>
                <input type="text" class="form-control" id="inputZip">
                </div>
            </div>
            <div class="form-group">
                <div class="form-check">
                <input class="form-check-input" type="checkbox" id="gridCheck">
                <label class="form-check-label" for="gridCheck">
                    Check me out
                </label>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Sign in</button>
        </form>
    </div>
</div>

但是，当我尝试格式化表单的内容时，一切都是零碎的。标签在输入上方，即使我定义了行和列，也不会考虑到它们

例如，我使用了表单行部分中boostrap website上给出的代码，这是我得到的：

提前感谢您的帮助！

编辑：

那是与另一个文件的CSS冲突，现在问题已解决 谢谢大家！

Answer 1

我不知道您是如何编写表单字段的，但这是我如何在Bootply上工作的示例：

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    </li>
</ul>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <form>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</div>

我使用了您先前的示例，并从此处获取了一些输入字段：bootstrap docs对我来说很好。只需将您的输入字段和标签包装在表单组中，就可以了。

图片示例：

还有什么？

编辑：

我已经将您的html从表单中粘贴到了示例中，看起来还不错。 您确定没有对.css进行任何更改以使Bootstrap样式混乱吗？

这是第二次测试的照片：

如果您希望将标签和输入字段放在同一行中，则可以采用 form-group行方法。这是一个示例：

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    </li>
</ul>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <form>
            <div class="form-group row">
                <label for="inputEmail4" class="col-md-1 col-form-label">Email</label>
                <div class="col-md-3">
                    <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputPassword4" class="col-md-1 col-form-label">Password</label>
                <div class="col-md-3">
                    <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputAddress" class="col-md-1 col-form-label">Address</label>
                <div class="col-md-3">
                    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputAddress2" class="col-md-1 col-form-label">Address 2</label>
                <div class="col-md-3">
                    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputCity" class="col-md-1 col-form-label">City</label>
                <div class="col-md-3">
                    <input type="text" class="form-control" id="inputCity">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputState" class="col-md-1 col-form-label">State</label>
                <div class="col-md-3">
                  <select id="inputState" class="form-control">
                      <option selected>Choose...</option>
                      <option>...</option>
                  </select>
                </div>
            </div>
            <div class="form-group row">
                <label for="inputZip" class="col-md-1 col-form-label">Zip</label>
                <div class="col-md-3">
                    <input type="text" class="form-control" id="inputZip">
                </div>
            </div>

            <div class="form-check form-check-inline">
              <div>
                <input class="form-check-input" type="checkbox" id="gridCheck">
              </div>
              <label class="form-check-label" for="gridCheck">Check me out</label>
            </div>
            <br>
            <button type="submit" class="btn btn-primary">Sign in</button>
        </form>
    </div>
</div>

还有用于备份的示例图片：

干杯！