Question

我正在设计一个Bootstrap网格，希望它能在不同的视图大小上进行更改。

我使用的代码包括在这里：

<div class="container">
    <div class="row">
        <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
            <h3>فرم اطلاعات کاربر</h3>
            <hr>
            <fieldset>
                <legend>گروه اول</legend>
                <div class="form-group">
                    <div class="row">
                        <div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-3 col-md-push-9">
                            <label for="name">نام</label>
                            <input type="text" name="name" placeholder="نام" class="form-control">
                        </div>
                        <div class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-3 col-md-pull-0 col-md-push-3">
                            <label for="family">نام خانوادگی</label>
                            <input type="text" name="family" placeholder="نام خانوادگی" class="form-control">
                        </div>
                        <div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-3 col-md-pull-3 col-md-push-0">
                            <label for="name">نام پدر</label>
                            <input type="text" name="father-name" placeholder="نام پدر" class="form-control">
                        </div>
                        <div class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-3 col-md-pull-9">
                            <label for="family">شماره شناسنامه</label>
                            <input type="text" name="id-number" placeholder="شماره شناسنامه" class="form-control">
                        </div>
                    </div>
                </div>
            </fieldset>

        </div>
    </div>
</div>

我还在这里创建了一个Bootply：Code Sample

正如您在上面的链接中看到的那样，第3列当视图处于MD模式时，拉出3列并且因为它已经在SM模式下被推送，我重置了推送MD模式，但是虽然css正确正在列上设置，但它没有移动到正确的位置。

有人知道如何解决这个问题吗？

更新：我还要提一下，我希望我的布局从右到左，这就是我使用此代码的原因。

Answer 1

我找到了问题的原因，这对我来说似乎是个错误。

当我为col-md-pull-0添加col-md-push-3时，Bootstraps尝试使用left:0从元素中删除左侧定位并设置right:25%，奇怪的是左侧定位确实在这种情况下无法工作，我必须将左侧设置为自动（left:auto）才能使其正常工作。

记住这一点，当我将左侧设置为自动手动时，这里的Bootply“Sample code”可以解决问题。

如果这是我正确使用类的原因，那么这可能是Bootstrap 3中的一个错误，需要修复。

如果这是我的想法，请告诉我。

更新1：以下是此问题的快速解决方案，之后将在框架中修复（现在没有按预期完全正常工作，我还在努力）：

.col-xs-pull-0 { 对：汽车; } .col-xs-push-0 { 左：汽车; } @media（min-width：768px）{ .col-sm-pull-0 { 对：汽车; } .col-sm-push-0 { 左：汽车; } } @media（min-width：992px）{ .col-md-pull-0 { 对：汽车; } .col-md-push-0 { 左：汽车; } } @media（min-width：1200px）{ .col-lg-pull-0 { 对：汽车; } .col-lg-push-0 { 左：汽车; } }

~~将此代码包含在css文件中，并在HTML中的bootstrap。*。css之后包含该文件以解决此问题。~~

更新2：最后，我找到了解决此问题的正确方法。

来自bootstrap框架的mixin.less文件中的Less代码部分应替换为此处提供的代码：

在mixin.less文件中找到此代码（有问题的代码）：

.calc-grid-column(@index, @class, @type) when (@type = push) {
  .col-@{class}-push-@{index} {
    left: percentage((@index / @grid-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = pull) {
  .col-@{class}-pull-@{index} {
    right: percentage((@index / @grid-columns));
  }
}

并将此替换为此代码（解决方案代码）：

.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
  .col-@{class}-push-@{index} {
    left: percentage((@index / @grid-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
  .col-@{class}-push-0 {
    left: auto;
  }
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
  .col-@{class}-pull-@{index} {
    right: percentage((@index / @grid-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
  .col-@{class}-pull-0 {
    right: auto;
  }
}

这将解决问题，就像我现在测试它一样。如果有人发现错误，请告诉我。

对于那些不熟悉Less以及如何使用它来定制和生成引导框架的人，你可以在这里找到我的文章（How to customize Twitter Bootstrap to fit your web design）。

Answer 2

还要注意一件事你不需要重复所有这些课程

<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">

通过声明col-xs-12你要说bootstrap使用12 col for Mobile和更大的屏幕

<div class="col-xs-12">

Bootstrap布局在逻辑上是正确的，但渲染很奇怪

2 个答案: