带中心文本的页脚 - 图像 - 文本引导程序

Question

因此，目前我对这个问题感到非常愚蠢，我想要一个具有以下内容水平的页脚(按此顺序(：文本 - image -text -text

这有效，但我希望它以中心为中心，并且不会发生在XS上。

这是我的代码(在JSFIDDLE中(

    <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

它是为您的网格选择正确的比例。众所周知，Bootstrap网格由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，这就是为什么事物不起作用。