#html #css #angular #styles
#HTML #css #angular #стили
Вопрос:
У меня есть этот контейнер, созданный с помощью 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>
Кто-нибудь может мне помочь с этим? Спасибо!
Ответ №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>
Вы можете ознакомиться с документацией здесь: