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






используйте этот код для col-md-1 style = {float:right;}
Спасибо, это очень помогло.
Я знаю, что могу сделать это со смещением. Но потом, когда содержимое в середине возвращается. нажимается кнопка
help. Он переполняется .. Как мне с этим справиться. Я думал о встроенном условном выражении с тернарными операторами, но тогда HTML становится настолько переполненным.