Question

所以此刻我对这个问题感到非常愚蠢，我想要一个具有以下内容的页脚水平（按此顺序）：text - image - text

这有效，但我希望它集中在xs上。

    <div class="row">
    <div class="copyright">
        <div class="row">
            <div class="col-xs-4">
                <p class="pull-right">
                    {{date('Y')}}
                </p>
            </div>
            <div class="col-xs-2 ">
                <img src="{{asset('images/frontend/company-logo/icon/wedesignit_icon_v2018.svg')}}" alt="Wedesignit" style="height: 34px;">
            </div>
            <div class="col-xs-6">
                <p class="pull-left">@lang('site.tagline.company-name') <span class="hidden-xs">@lang('site.tagline.niche')</span></p>
            </div>
        </div>
    </div>
</div>

我希望有人可以帮助我解决这个愚蠢的事情

Answer 1

试试这个：

<div class="col-xs-2  text-center">

Answer 2

选择正确的网格比例。正如您所知，引导网格由12列组成，因此您可以通过选择正确的col类来使图像或任何元素居中。例如：

<div class="col-xs-5">
 <p class="pull-right">
   2018
 </p>
</div>
<div class="col-xs-1">
 <img src="https://oneshoe.nl/sites/default/files/laravel-l-slant.png"  style="height: 34px;">
</div>
<div class="col-xs-6">
 <p class="pull-left">Company does nice things</p>
</div>

Answer 3

你好，这种方式完全集中在中间 https://jsfiddle.net/92w2e5cp/13/

<footer id="footer" class="dark-bg padding-top">
    <div class="row">
        <div class="copyright">
            <div class="row">
                <div class="col">
                    <p class="pull-right">
                        2018
                    </p>
                </div>
                <div class="col">
                    <img src="https://oneshoe.nl/sites/default/files/laravel-l-slant.png"  style="height: 34px;">
                </div>
                <div class="col">
                    <p class="pull-left">Company does nice things</p>
                </div>
            </div>
        </div>
    </div>

</footer>

CSS

.row{
  display:flex;
  justify-content: center;
}
.row div {
  margin: 0 5px;
}

Answer 4

所以问题不在我的代码中，或者无论如何，创建模板的人改变了引导程序的核心，这就是为什么事情不会起作用。

与居中的文本的页脚 - 图象 - 文本bootstrap

4 个答案: