bootstrap 4中心项目，除了第一个元素

Question

.c-footer {
  background: #000;
  padding: 20px 0;
  color: #fff; }
  .c-footer__logo {
    display: inline; }
  .c-footer__link {
    color: inherit; }
    .c-footer__link a {
      color: inherit; }
      .c-footer__link a:hover {
        color: #fff; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="c-footer text-center">
 <div class="c-footer__logo">
  <img src="http://dynamicdog.se/wp-content/themes/dynamicdog/img/logo.png">
 </div>
 <span class="c-footer__link">
  <a href="#">Malmö</a><span> - </span>
 </span>
 <span class="c-footer__link">
  <a href="#">Stockholm</a><span> - </span>
 </span>
  <span class="c-footer__link">
  <a href="#">Malmö</a><span> - </span>
 </span>
 <span class="c-footer__link">
  <a href="#">Stockholm</a><span> - </span>
 </span>
  <span class="c-footer__link">
  <a href="#">Malmö</a><span> - </span>
 </span>
 <span class="c-footer__link">
  <a href="#">Stockholm</a>
 </span>
</div>

我想完成下面的图片：

将图像浮动到左侧，使文本居中。我尝试使用引导类center-text但是它将所有元素集中在一起......

继承我的标记：

<div class="c-footer">
 <div class="c-footer__logo">
  <img src="/static/media/q-logo.98ed5701.png">
 </div>
 <span class="c-footer__link">
  <a href="#">Malmö</a><span> - </span>
 </span>
 <span class="c-footer__link">
  <a href="#">Stockholm</a><span> - </span>
 </span>
</div>

你将如何实现这一目标？

Answer 1

使用flex属性，每边只能有一个div。由于我的示例中的徽标是100px，因此我将其设置为100px。请记住，img有一个img-fluid类。

我还为你附了一个codepen。 https://codepen.io/Gwapedwink/pen/yPmaVN?editors=1100#0

<footer>
  <div class="container d-flex align-items-center">
    <div class="footer-side">
      <img src="http://placehold.it/400/fff/999&text=LOGO" class="img-fluid" />
    </div>
    <div class="mx-auto d-flex">
      <a href="#" class="d-inline-block p-3 mx-2">Link Label</a>
      <a href="#" class="d-inline-block p-3 mx-2">Link Label</a>
      <a href="#" class="d-inline-block p-3 mx-2">Link Label</a>
      <a href="#" class="d-inline-block p-3 mx-2">Link Label</a>
      <a href="#" class="d-inline-block p-3 mx-2">Link Label</a>
    </div>
    <div class="footer-side">
      <!-- nothing here, homie -->
    </div>
  </div> 
</footer>

<style>
/* this is all that matters */
footer .footer-side {
  width: 100px; /* whatever you want the logo width to be */
}
</style>

Answer 2

在我的方法中，我使用text-align和float。 text-align将对齐所有内联项。这会影响文本和图像，因为它们都是内联的。由于我们希望图像保留在左侧，我们可以浮动图像。这应该将图像放在容器的左侧。

这两个组合使图像粘在左边，而c-footer内的其余内容与中心对齐，而不管设备宽度如何！ ：）

＆＃13;

＆＃13;

.c-footer {
  background-color: #000;
  height: 80px;
  text-align: center;
}

.c-footer__logo {
  padding-left: 20px;
  float: left;
}

.c-footer__logo img {
  height: 80px; /* Just for the looks of the example */
}

.c-footer__link a{
  line-height: 80px;
  color: #fff;
}

.c-footer__link:after {
  color: #fff;
  content: '\00a0-\00a0'
}
.c-footer__link:last-child:after {
  content: ''
}

＆＃13;

<footer class="c-footer">
  <div class="c-footer__logo">
    <img src="https://i.gyazo.com/1e2e3e71c2e236cb827f8026d1aa813e.png">
  </div>
    <span class="c-footer__link">
      <a href="#">Bergen</a>
    </span>
    <span class="c-footer__link">
      <a href="#">Oslo</a>
    </span>
    <span class="c-footer__link">
      <a href="#">Stavanger</a>
    </span>
    <span class="c-footer__link">
      <a href="#">Kristiansand</a>
    </span>
    <span class="c-footer__link">
      <a href="#">Trondheim</a>
    </span>
    <span class="c-footer__link">
      <a href="#">Drammen</a>
    </span>
</footer>

＆＃13;

＆＃13;

＆＃13;