Question

仅包含文本时，单击导航选项卡链接会显示所需的内容，但是在包含这些表格之后，它将不再起作用。看起来问题是表格集成。这是代码：

<ul class="nav nav-tabs tabs" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" href="#profile" role="tab" data-toggle="tab">Free Values</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#buzz" role="tab" data-toggle="tab">check</a>
              </li>
            </ul>
 <div class="tab-content">
                  <div role="tabpanel" class="tab-pane fade in active show" id="profile">
                      <label for="name" class="control-label float-left">From</label>
                      <div class="input-group">

                            <input type="text" class="form-control" value="United Kingdom" aria-label="Text input with dropdown button">
                            <div class="input-group-prepend">
                                <button class="btn btn-primary btn-select dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item " href="javascript:void(0)">Action</a>
                                    <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                                    <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
                                    <div role="separator" class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
                                </div>
                              </div>
                        </div>
                    </div>
                    <label for="name" class="control-label float-left">To</label>
                        <div class="input-group">

                              <input type="text" class="form-control" value="US" aria-label="Text input with dropdown button">
                              <div class="input-group-prepend">
                                  <button class="btn btn-primary btn-select dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                                  <div class="dropdown-menu">
                                      <a class="dropdown-item " href="javascript:void(0)">Action</a>
                                      <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                                      <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
                                      <div role="separator" class="dropdown-divider"></div>
                                      <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
                                  </div>
                                </div>
                          </div>
                          <div class="input-group">
                              <input type="text" class="form-control" value="981" aria-label="Text input with dropdown button">
                              <div class="input-group-prepend">
                                  <button class="btn btn-primary btn-select dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">EURO</button>
                                  <div class="dropdown-menu">
                                      <a class="dropdown-item " href="javascript:void(0)">Action</a>
                                      <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                                      <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
                                      <div role="separator" class="dropdown-divider"></div>
                                      <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
                                  </div>
                                </div>
                          </div>

                          <div class="input-group text-center " >
                              <input type="text" class="form-control"  value="Cash To Cart" aria-label="Text input with dropdown button" style="color:#fff; margin:0; background-color:#222222; border-color:#323F49;

                               border-top-left-radius: 8px; border-bottom-left-radius: 8px; height:50px">
                              <div class="input-group-prepend">
                                  <button class="btn  btn-select dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                                  <div class="dropdown-menu">
                                      <a class="dropdown-item " href="javascript:void(0)">Action</a>
                                      <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                                      <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
                                      <div role="separator" class="dropdown-divider"></div>
                                      <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
                                  </div>
                                </div>
                          </div>
                          <input type="text" class="form-control last" id="exampleInputEmail1" aria-describedby="emailHelp" value="100.000">
                  </div>
                  <div role="tabpanel" class="tab-pane fade" id="buzz">
<input type="text" class="form-control last" id="exampleInputEmail1" aria-describedby="emailHelp" value="728">
</div>

                </div>
          </div>
        </div>

当您单击到第二个选项卡时，第一个选项卡的内容仍然存在，并且第二个选项卡上的输入没有出现或出现在其外部的两个选项卡的底部。如何解决此问题并使标签正常工作？

Answer 1

错字，另外错误div

</div> <!-- Remove This Div -->
<label for="name" class="control-label float-left">To</label>

https://jsfiddle.net/8to0v637/

在包含表格之后，Bootstrap 4导航选项卡无法正常工作

1 个答案: