Question

我正在尝试在图像旁边显示文字。我希望它只在设备宽度低于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"
            alt="pic" 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等很新。所以我可能会遗漏一些非常明显的东西。我在这个具体案例中找不到任何相关的解决方案，所以我们非常感谢任何帮助/见解。

Answer 1

你必须扭转每个其他col-class的偏移量（虽然为什么......我不确定）：

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

DEMO：http://jsfiddle.net/dpvarcfe/

Answer 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，告诉我这是否有帮助

Answer 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>

中心引导列仅使用偏移量来处理小型设备

3 个答案: