Bootstrap 型号

Question

我有一个下拉列表，它从数据库 table 中获取列表详细信息，并使用获取的详细信息生成列表。现在的问题是这个列表太长了。这是我以前的代码。

<div class="col-md-3">
      <!-- list menu start -->
           <div class="list-menu hidden-sm hidden-xs">
                <div class="list-heading">
                     <h2>all lists</h2>
                </div>
                   <div class="list-menu hidden-menu">
                       {!! $lists['tree'] !!}
                   </div>
           </div>
      <!-- list menu end -->

我的列表就是这样显示的

正如我之前提到的，此列表包含超过 36 个项目，并且对用户不友好。所以我添加了一个 bootstrap 模型和代码更新如下。

  <div class="row">
                    <div class="col-md-3">
                        <!-- list menu start -->
                        <div class="list-menu hidden-sm hidden-xs" data-toggle="modal" data-target="#exampleModalLong" >
                            <div class="list-heading">
                                <h2>all lists</h2>
                            </div>

                        </div>
                        <!-- list menu end -->
                    </div>
                    <div class="col-md-9">

This is the bootstrap model

 <!-- Modal -->
<div class="modal fade" id="exampleModalLong"  role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> 
  <div class="modal-dialog" role="document">      
        <div class="catagory-list-menu hidden-menu">
            {!! $categories['tree'] !!}
        </div>
    </div>
  </div>

在此之后我得到了预期的输出。意味着所有列表项都显示在模型框中。但是点击模型框按钮后

 <div class="list-menu hidden-sm hidden-xs" data-toggle="modal" data-target="#exampleModalLong" >

然后我按 Esc 或单击其他地方再次隐藏模型框。它得到 hide.And 现在开始出现问题。

Problem 01

网页中的所有内容向左移动大约10px。然后还有一个10px白space

Problem 02

当我再次单击 列出所有按钮 时，它只是模糊了屏幕，但我看不到模型。

但是当我按 Esc 键或单击其他地方然后单击 列出所有按钮 时，模型框会出现并显示项目列表。当我再次单击 esc 时，它开始再次将网页移回左侧，然后我单击 列出所有按钮 它变得模糊并开始再次将网页移回左侧。所以这个反复发生。所以谁能帮我解决一下 this.I 知道这个问题有点长，但我希望有人能告诉我这个错误发生的地方。谢谢

Answer 1

试试这个。

<html>
  <head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
  </head>

  <div class="container">
    <div class="row">
      <h2>Bootstrap-select example</h2>
      <p>This uses <a href="https://silviomoreto.github.io/bootstrap-select/">https://silviomoreto.github.io/bootstrap-select/</a></p>
      <hr />
    </div>

    <div class="row-fluid">
      <select class="selectpicker" data-show-subtext="true" data-live-search="true">
        <option data-subtext="Rep California">Tom Foolery</option>
        <option data-subtext="Sen California">Bill Gordon</option>
        <option data-subtext="Sen Massacusetts">Elizabeth Warren</option>
        <option data-subtext="Rep Alabama">Mario Flores</option>
        <option data-subtext="Rep Alaska">Don Young</option>
        <option data-subtext="Rep California" disabled="disabled">Marvin Martinez</option>
      </select>
      <span class="help-inline">With <code>data-show-subtext="true" data-live-search="true"</code>. Try searching for california</span>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
</html>

Bootstrap 型号

Bootstrap model

html

css

bootstrap-4

laravel-5.4