仅对小型设备使用偏移的中心引导列

Posted 2023-03-05

【中文标题】仅对小型设备使用偏移的中心引导列

【英文标题】：Center bootstrap column using offset for small devices only

【发布时间】：2014-10-18 06:10:48

【问题描述】：

我正在尝试在图像旁边显示文本。我希望它仅在设备宽度低于 767px 时堆叠。否则，我希望他们并排。 在此堆叠期间，图像是响应式的，因此它占据了文本上方的整行。为了避免这种情况，我尝试在 xs 时限制列的大小。这可确保图像在指定的列大小内。 现在我想使图像居中。我尝试使用偏移方法，但它迫使它们以所有分辨率堆叠。

这是代码和fiddle

<div class="container">
<div class="row">
    <div class="col-xs-12 col-sm-4 col-lg-4">
        <img
            src="https://c1.staticflickr.com/3/2813/9093733888_79ccacf171_z.jpg"
             class="img-responsive img-circle">
    </div>
    <div
        class="col-xs-12 col-sm-6 col-sm-offset-2 col-lg-6 col-lg-offset-2 text-center">
        <h3>Hello World!</h3>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa
            qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>
</div>

在上面的代码中，如您所见，图像在小型设备上占满宽度

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

减小图像大小的一种方法是减小列大小。所以上面的行改为

<div class="col-xs-4 col-sm-4 col-lg-4">

这占据了屏幕的左半部分。所以为了居中，我添加了一个偏移量。

<div class="col-xs-4 col-xs-offset-4 col-sm-4 col-lg-4">

这句话适用于 xs 分辨率，但两列在更高的分辨率（sm、lg）下也会堆叠。

我对 bootstrap、css、html 等还是很陌生。所以我可能在这里遗漏了一些非常明显的东西。在这种特定情况下，我找不到任何相关的解决方案，因此不胜感激。

【参考方案1】：

您必须反转每个其他 col 类的偏移量（尽管为什么......我不确定）：

<div class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-0 col-lg-4 col-lg-offset-0">

演示：http://jsfiddle.net/dpvarcfe/

【讨论】：

非常感谢！我永远不会想到我必须为其他类添加空偏移量。我知道这会如何改变事情，但这正是我想要的！

我想我明白为什么需要额外的偏移量了。由于它首先是可移动的，因此应用于 xs 的偏移会延续到更高的宽度，即 sm、md、lg。因此，在处理较大的设备时，必须删除此偏移量（通过将其设置为 0）。所以 不需要 col-lg -offset-0 因为 sm 的偏移量已经设置为 0，这意味着偏移量适用于更大的宽度。

啊，有道理。我确实觉得奇怪的是，一些网格类不遵循核心类的“级联”规则。我想这个更一致。不错的收获。

【参考方案2】：

我不确定我是否正确，但也许这会对你有所帮助：

<div class="container">
  <div class="row">         
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center">
      <img src="https://c1.staticflickr.com/3/2813/9093733888_79ccacf171_z.jpg" class="img-responsive img-circle">
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 text-center">
      <h3>Hello World!</h3>
      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa
        qui officia deserunt mollit anim id est laborum.</p>
    </div>  
  </div>
</div>

或查看Demo Here，如果这对您有帮助，请告诉我

【讨论】：

图像仍然是 col-xs-12，这意味着它完全覆盖了列。我想减小这个尺寸（可能是 col-xs-4）并将其居中，但使用 col-xs-offset-4 会在更高的分辨率下抛出元素。

@media only screen and (max-width: 767px) .myImage max-width: 80%; height: auto; margin: 0 auto; 我不知道出了什么问题，但试试这个。

这是可行的，因为我们明确设置了特定分辨率的图像宽度（覆盖引导程序）。但我仍然不确定为什么引导程序的行为方式如此。有什么想法吗？

【参考方案3】：

在 Bootstrap (4.x) 的最新稳定版本中，上述选项均无效，因为偏移量的类已更改。

以下代码适用于 Bootstrap 4.x

 <div class="container">
        <div class="row m-3">
            <div class="col-10 offset-1 col-sm-10 offset-sm-1 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                <div class="card shadow">
                    <div class="card-header bg-primary">
                        <h2 class="text-white">
                            Register with us
                        </h2>
                    </div>
                    <div class="card-body">
                        <form action="">
                            <div class="form-group">
                                <span for="txtemail">Email</span>
                                <input type="email" class="form-control" id="txtemail" />
                            </div>
                            <div class="form-group">
                                <span for="txtpassword">Password</span>
                                <input type="password" class="form-control" id="txtpassword" />
                            </div>
                            <div class="form-group">
                                <span for="txtmobile">Mobile</span>
                                <input type="number" class="form-control" id="txtmobile" />
                            </div>
                            <div class="form-group">
                                <span for="sltcountry">Select country</span>
                                <select class="form-control" id="sltcountry" >
                                    <option value="">India</option>
                                    <option value="">US</option>
                                    <option value="">UK</option>
                                    <option value="">Canada</option>
                                </select>    
                            </div>
                            <b>Select gender</b>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="rdogender" value="1" /> Male
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="rdogender" value="0" /> Female
                                </label>
                            </div>
                            <b>Select language you can speak and write</b>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="rdogujarati" value="1" /> Gujarati
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="rdohindi" value="2" /> Hindi
                                </label>
                            </div>
                            <div class="form-group">
                                <label for="txtaddress">Address</label>
                                <textarea class="form-control" id="txtaddress" cols="30" rows="3"></textarea>
                            </div>
                            <div class="form-group text-right">
                                <button class="btn btn-primary">Save</button>
                                <button class="btn btn-warning">Clear all</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>