Bootstrap

BreakpointClass infixDimensions
Extra smallNone<576px
Smallsm≥576px
Mediummd≥768px
Largelg≥992px
Extra largexl≥1200px
Extra extra largexxl≥1400px

Перенос первого столбика в мобилке в строке любой длинны

Десктоп:

Мобилка:

Код:

<div class="mt-3 mb-3">
    <div class="d-block d-sm-inline pe-3">
        <label for="expensesInput">Ваше значение:</label>
    </div>
    <div class="d-block d-sm-inline">
        <div class="row g-3 align-items-center d-sm-inline-flex">
            <div class="col-auto">
                <input type="number" class="form-control" id="expensesInput" value="3000" style="width: 8.8rem;">
            </div>
            <div class="col-auto" style="width: 5.2rem;">
                <span class="form-text"> пунктов</span>
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-outline-success" id="showButton">показать</button>
            </div>
        </div>
    </div>
</div>

Строка вылезает за padding в TD

В этом случае поможет width: max-content;

<td class="text-nowrap"><div style="width: max-content;">длинный текст</div></td>

Не показывать элемент в мобилке, но показать его как  display: inline-flex

<span class="d-none d-sm-inline-flex">длинный текст</span>

Ссылки в строчку

<div class="input-group d-none d-sm-flex">
    <span class="input-group-text">
        Фильтры
    </span>
    <span class="form-control overflow-x-hidden" style="white-space: nowrap;">
        <a class="btn btn-light" href="/">foo bar foo bar foo bar foo bar</a>
        <a class="btn btn-light" href="/">foo bar foo bar foo bar foo bar</a>
        <a class="btn btn-light" href="/">foo bar foo bar foo bar foo bar</a>
        <a class="btn btn-light" href="/">foo bar foo bar foo bar foo bar</a>
        <a class="btn btn-light" href="/">foo bar foo bar foo bar foo bar</a>
        <a class="btn btn-light" href="/">foo bar foo bar foo bar foo bar</a>
    </span>
</div>

Форма 1

<div class="ff_top_short_form" style="padding: 0 1rem">
    <div class="d-sm-none mb-1">
        <form action="/" method="get">
            <div class="input-group ff_font">
                <span class="input-group-text" data-bs-toggle="offcanvas" data-bs-target="#searchForm" aria-controls="searchForm" onclick="quantityFound()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentcolor"><path fill-rule="evenodd" d="M8 20c1.9 0 3.4-1.3 3.9-3H21c.6 0 1-.4 1-1s-.4-1-1-1h-9.1c-.4-1.7-2-3-3.9-3s-3.4 1.3-3.9 3H3c-.6 0-1 .4-1 1s.4 1 1 1h1.1c.5 1.7 2 3 3.9 3Zm-2-4c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2Zm10-4c1.9 0 3.4-1.3 3.9-3H21c.6 0 1-.4 1-1s-.4-1-1-1h-1.1c-.4-1.7-2-3-3.9-3s-3.4 1.3-3.9 3H3c-.6 0-1 .4-1 1s.4 1 1 1h9.1c.5 1.7 2 3 3.9 3Zm-2-4c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2Z" clip-rule="evenodd"></path></svg>
                </span>
                <input class="form-control"
                       placeholder="Foo"
                       name="minAmount"
                       type="number"
                       step="1"
                       min="1"
                       value=""
                       pattern="([0-9]{1,3}).([0-9]{1,3})"
                >
                <input class="form-control"
                       placeholder="Bar"
                       name="minTerm"
                       type="number"
                       step="1"
                       min="1"
                       value=""
                >
                <span class="input-group-text">
                    <button class="btn p-0" type="submit">
                        <svg xmlns="http://www.w3.org/2000/svg" id="FF1" data-name="FF 1" width="30" height="30" viewBox="0 0 649.1 627.95"><defs><style>.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6{fill:none;stroke-miterlimit:10;}.cls-1{stroke:#000;stroke-width:29px;}.cls-2{stroke:#39b54a;}.cls-2,.cls-3,.cls-4,.cls-5{stroke-width:49px;}.cls-3{stroke:#fbb03b;}.cls-4{stroke:#ed1c24;}.cls-5,.cls-6{stroke:#0071bc;}.cls-6{stroke-width:59px;}</style></defs><circle class="cls-1" cx="224.8" cy="224.58" r="200"/><path class="cls-2" d="M932.2,600.37c-110.45,0-200-89.54-200-200" transform="translate(-707.7 -175.92)"/><path class="cls-3" d="M732.2,400.42c0-110.46,89.55-200,200-200" transform="translate(-707.7 -175.92)"/><path class="cls-4" d="M932.16,200.42c110.46,0,200,89.54,200,200" transform="translate(-707.7 -175.92)"/><path class="cls-5" d="M1132.16,400.37c0,110.46-89.54,200-200,200" transform="translate(-707.7 -175.92)"/><line class="cls-6" x1="364.98" y1="366.76" x2="629.3" y2="606.08"/></svg>
                    </button>
                </span>
            </div>
        </form>
    </div>
</div>

Изображение

<img src="..." class="img-fluid" alt="..."> - автомасштабируемое

<img src="..." class="rounded float-start" alt="..."> - выравнивание слева
<img src="..." class="rounded mx-auto d-block" alt="..."> - выравнивание по центру
<img src="..." class="rounded float-end" alt="..."> - выравнивание справа

еще один вариант выравнивания по центру:

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Автоскрытие содержимого в колонках таблицы

<style>
    table {
        table-layout: fixed;
        width: 100%;
    }
    td {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>

с этим может быть только одна проблема - браузер старается уместить всю таблицу в экран, сжимая ячейки по полной (но зато все ячейки будут одинаковой ширины).

Поэтому, есть вариант вложенных DIV-ов:

<td>
    <div><a href="#"><img src="/some/image.png"></a></div>
    <div class="auto_width_overflow_hidden">
        <div><a href="#">long text</a></div>
    </div>
</td>
<style>
    .ff_auto_width_overflow_hidden {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%; /* или другой ограничитель */
    }
    .ff_auto_width_overflow_hidden DIV:first-child {
        min-width: 0;              /* важно! */
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>

Самовыравнивающийся блок

<style>
    #ff_telegram_adv {
        display: flex;
        align-items: center;     /* Выравниваем по вертикали по центру */
        justify-content: center;
        height: 420px;
        background: url("/telega-background.jpg") center;
        font-size: 2.8rem;
        color: white;
        text-align: center;
        text-shadow: #008DFF 0 0 5px;
        border-radius: 5rem;
        text-transform: uppercase;
        margin-bottom: 1rem;
        font-weight: 600;
    }
</style>
<a id="ff_telegram_adv" href="/">My<br>text</a>

Таблица с превращением TD-шек в строки в мобилке

<style>
    #superT TD {
        width: 100%;
        table-layout: fixed;
    }
    /* Для мобилки: */
    #superT TD {
        display: block;
    }
    /* Для больших экранов: */
    @media screen and (min-width: 450px) {
        #superT TD {
            display: table-cell !important;
        }
    }
    /* Чтобы текст сокращался когда не помещается: */
    #superT TD DIV {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<table id="superT">
    <tr>
        <td style="width: 100px"><div>1111111111111111111111111111111111111111111111</div></td>
        <td><div>2222222222222222222222222222222222222222222222222222222222222222222</div></td>
        <td><div>3333333333333333333333333333333333333333333333333333333333333333333</div></td>
        <td style="width: 200px"><div>4444444444444444444444444444444444444444444444</div></td>
    </tr>
</table>

Тоже самое, но с помощью DIV-ов:

<style>
    .superTable {
        width: 100%;
        display: table;
        table-layout: fixed; /* чтобы таблица не выходила за блок, в котором она находится */
        border-collapse: collapse; /* Убирает промежутки между ячейками */
    }
    .superRow {
        display: table-row;
    }
    .superCell {
        display: table-cell;
        vertical-align: middle; /* Выравнивание содержимого по вертикали */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Для мобилки: */
    @media (max-width: 450px) {
        .superCell {
            display: block;
            width: 100% !important;
        }
    }
</style>
<div class="superTable">
    <div class="superRow">
        <div class="superCell" style="width: 100px">111111111111111111111111111111111111111111111</div>
        <div class="superCell">222222222222222222222222222222222222222222222222222222222222222222</div>
        <div class="superCell">333333333333333333333333333333333333333333333333333333333333333333</div>
        <div class="superCell" style="width: 200px">444444444444444444444444444444444444444444444</div>
    </div>
</div>

Полезное

  1. виды блоков в бутстрап
  2. поведение flex-блоков
  3. выравнивание и позиционирование колонок
11.09.2021 07:08

Комментарии

Комментариев пока нет.

Copyrights © 2007 - 2026 YaPro.Ru