Потяните вправо, даже если столбцы сетки Bootstrap отсутствуют

Я хочу всегда тянуть последний столбец вправо. У меня есть 1 группа 4-column, 1 группа 7 -column и одна колонка.

Мой контент виден только в определенных случаях. В случае, если контент в col-md-7 есть, последний получает штраф. Когда его нет, он переходит к середине.

Я использую AngularJS вместе с bootstrap 3.

HTML-код:

<div class = "row mr10 ml10">
                <div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4">
                    <button class = "btn btn-default btn-sm"
                        ng-click = "getData(data, LCtrl.Protection);"
                        ng-disabled = "LCtrl.loading">
                        Run Query
                    </button>
                    <button class = "btn btn-danger btn-sm" ng-if='LCtrl.loading'
                        ng-click = "LCtrl.DataStop('Stoped By User')">
                        Stop Query
                    </button>
                </div>
                <div class = "col-lg-7 col-md-7 col-sm-7 col-xs-7"
                    permission = "[lCtrl.roles.disabled]">
                    <div class = "pull-right mr10">
                        <span class = "mb10"><b>Protection</b></span>
                        <label class = "switch" style = "margin-top: 6px; margin-bottom: -6px;">
                            <input type = "checkbox"
                                ng-model = "LCtrl.Protection"
                                ng-change = "changeProtection()">
                            <span class = "slider round"></span>
                        </label>
                    </div>
                </div>
                <div class = "col-lg-1 col-md-1 col-sm-1 col-xs-1">
                    <a href = "//l-l/l.html?l = {{lCtrl.licenseStr}}"
                        class = "linkAtHeader pull-right"
                        style = "position: fixed;"
                        target = "_blank">
                        <i class = "fa fa-question-circle" aria-hidden = "true"></i>
                        Help
                    </a>
                </div>

Я знаю, что могу сделать это со смещением. Но потом, когда содержимое в середине возвращается. нажимается кнопка help. Он переполняется .. Как мне с этим справиться. Я думал о встроенном условном выражении с тернарными операторами, но тогда HTML становится настолько переполненным.

user10104341 29.10.2018 13:02

Используйте ng-class в div кнопки help. Что-то вроде: ng-class = "{'col-md-1': otherContentVisible, 'col-md-8': !otherContentVisible}". По сути, вам всегда нужно, чтобы столбцы складывались до 12, поэтому используйте некоторую переменную, чтобы отслеживать, существует ли средний элемент или нет, а если нет, увеличьте ширину столбца. В качестве альтернативы, на самом деле не удаляйте col-md-7 из DOM ... держите его и просто переключайте содержимое внутри него.

james00794 29.10.2018 13:06

Спасибо за Ваш ответ. Это имеет смысл, но мне не нужна сложная логика в моем представлении. Даже если я перенесу эту логику в ctrl, это кажется чрезмерным. Спасибо за ответ ..

user10104341 29.10.2018 13:19
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
3
194
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

используйте этот код для col-md-1 style = {float:right;}

Спасибо, это очень помогло.

user10104341 29.10.2018 13:18

Другие вопросы по теме