即使在 Bootstrap Grid Columns 丢失的情况下也可以向右拉答案

【问题标题】：Pull-right even when Bootstrap Grid Columns are missing即使在 Bootstrap Grid Columns 丢失的情况下也可以向右拉
【发布时间】：2019-04-02 08:34:46
【问题描述】：

我想总是把最后一列拉到右边。我有 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 变得如此拥挤。
在 help 按钮的 div 上使用 ng-class。类似：ng-class="{'col-md-1': otherContentVisible, 'col-md-8': !otherContentVisible}"。基本上，您总是需要将列加起来为 12，因此使用一些变量来跟踪中间元素是否存在，如果不存在，则增加列宽。或者，实际上不要从 DOM 中删除 col-md-7... 保留它并切换其中的内容。
感谢您的回答。这确实有道理，但我不想在我的视图中使用复杂的逻辑。即使我将该逻辑移至 ctrl，也似乎过分了。不过谢谢你的回复..

标签： html angularjs twitter-bootstrap alignment

【解决方案1】：

将此代码用于 col-md-1 style={float:right;}

【讨论】：

谢谢，帮了大忙。