如何使用引导程序制作带有列的水平滚动条

Question

我有这个用 boostrap 制成的容器：

问题是，我怎样才能进行水平滚动以保持容器第一张图片的外观但在手机分辨率下？..

这是手机分辨率中的容器：

我不喜欢那样的..

这是我的代码：

<div class="card-body scroll" style="border: none;">
    <div class="cont">
        <div class="row">
            <div class="col-sm-12">
                <div class="card" style="border: none;">
                    <div class="box-header">
                        <div class="row">
                            <div class="col-sm-8">
                                <h3 class="box-title w-text">Gestión de Empresas</h3>
                            </div>
                            <div class="col-sm-4">
                                <div class="box-tools">
                                    <div class="input-group-prepend">
                                        <input type="text" name="table_search" class="form-control pull-right" placeholder="Búsqueda" ng-model="searchField">
                                        <span class="input-group-text">
                                            <i class="fa fa-filter"></i>
                                        </span>
                                        <span class="input-group-text">
                                            <i class="fas fa-plus"></i>
                                        </span>
                                     </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            <strong>Razón social</strong>
                        </div>
                        <div class="col-sm-3">
                            <strong>RIF</strong>
                        </div>
                        <div class="col-sm-2">
                            <strong>Dirección fiscal</strong>
                        </div>
                        <div class="col-sm-2">
                            <strong>Activo</strong>
                        </div>
                        <div class="col-sm-2">
                            <strong>Acciones</strong>
                        </div>
                        <hr style="border: none;">
                    </div>
                    <div class="row" style="text-align: center;">
                        <div class="col-sm-3">
                            <h3>Ventor central</h3>
                        </div>
                        <div class="col-sm-3">
                            <h3>J-XYZ</h3>
                        </div>
                        <div class="col-sm-2">
                            <h3>Empresa de pruebas</h3>
                        </div>
                        <div class="col-sm-2">
                            <h3>Activo</h3>
                        </div>
                        <div class="col-sm-2" style="color: orange;">
                            <i class="fas fa-chevron-circle-down"></i>
                        </div>
                        <div class="col-sm-3">
                            <h3>Distribuidora regional del sol</h3>
                        </div>
                        <div class="col-sm-3">
                            <h3>J-1234567890</h3>
                        </div>
                        <div class="col-sm-2">
                            <h3>Carretera nacional</h3>
                        </div>
                        <div class="col-sm-2">
                            <h3>Activo</h3>
                        </div>
                        <div class="col-sm-2" style="color: orange;">
                            <i class="fas fa-chevron-circle-down"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

谁能帮我解决这个问题？谢谢！

Answer 1

我使用 boostrap 提供的表格找到了解决此问题的方法：

<table class="table">
                      <thead class="thead-light">
                        <tr>
                          <th scope="col">
                            <strong>Razón social</strong>
                          </th>
                          <th scope="col">
                            <strong>RIF</strong>
                          </th>
                          <th scope="col">
                            <strong>Dirección fiscal</strong>
                          </th>
                          <th scope="col">
                            <strong>Activo</strong>
                          </th>
                          <th scope="col">
                            <strong>Acciones</strong>
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><h3>Ventor central</h3></td>
                          <td><h3>J-XYZ</h3></td>
                          <td><h3>Empresa de pruebas</h3></td>
                          <td><h3>Activo</h3></td>
                          <td><i class="fas fa-chevron-circle-down icon-fixed"></i></td>
                        </tr>
                        <tr>
                          <td><h3>Distribuidora regional del sol</h3></td>
                          <td><h3>J-1234567890</h3></td>
                          <td><h3>Carretera nacional</h3></td>
                          <td><h3>Activo</h3></td>
                          <td><i class="fas fa-chevron-circle-down icon-fixed"></i></td>
                        </tr>
                      </tbody>
                    </table>

您可以在此处查看文档：

https://getbootstrap.com/docs/4.0/content/tables/