Bootstrap 4 Nav-вкладки не работают правильно после включения формы внутри - PullRequest
Новая
       64

Bootstrap 4 Nav-вкладки не работают правильно после включения формы внутри

0 голосов
/ 30 ноября 2018

Когда был только текст, и вы нажимаете на ссылку навигационных вкладок, он показывает необходимый контент, но после включения этих форм он больше не работает.Похоже, проблема заключается в интеграции форм.Вот код: 

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

Когда вы нажимаете на вторую вкладку, содержимое первой вкладки все еще там, и ввод на второй вкладке либо не появляется, либо появляется в нижней части обеих вкладок за ее пределами.Как я могу это исправить и заставить закладки работать правильно?

1 Ответ

0 голосов
/ 30 ноября 2018

Опечатка ошибка один div дополнительно 

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

https://jsfiddle.net/8to0v637/

...