Question

我想做什么：
我正在使用html，css和bootstrap创建页脚。当页面在桌面上打开时，它看起来像这样（这就是我想要的）：

但是当网页达到最小宽度时，它看起来像这样：

但是，当网页减少到最小宽度时，我希望它看起来像这样：

问题/我尝试了什么：
所以，我有两件事情有困难问题1：我似乎无法找到一个解决方案，一旦没有更多的空间与他们并排，我就可以将图像和文本都集中在一起。

问题2：我无法找到一个解决方案，我可以保持黑色jumbotron的大小相同，并防止文本流出底部。

我尝试创建一个表（用文本代替图像来测试它）。我想如果我将元素放在一个表格中，图像以最左边的列为中心，文本居中在最左边的列中，那么，当表格变得足够小时，列将堆叠，元素将居中。但我无法让它发挥作用。

我还尝试在较大的一个中添加两个较小的jumbotrons。一个保存图像，另一个保存文本。但是我仍然无法将图像正确地放在中心位置，并且仍有一个问题是文本流出黑色超大屏幕的底部。

我做错了什么，如何使用CSS和HTML做我想做的事？如果Javascript是唯一的解决方案，我不介意尝试，我只是不要使用它。

代码：

这是我的HTML：

int year[] = A_car[3]

这是我的CSS：

<div class="container">
    <div class = "grid">
       <div class="row">
             <div class="jumbotron" id="footerJumbotron">
                <img src="ContactImages\facebookLogo.png" id="facebookLogo">
                <img src="ContactImages\twitterLogo.png" id="twitterLogo">
                <img src="ContactImages\youtubeLogo.png" id="youtubeLogo">
                <p id="footerFont">&copy; 2016 Company Name. All Rights Reserved.<br> Built & Managed by Company Name</p>
             </div>
        </div>
    </div>
</div>

Answer 1

您可以使用引导网格和媒体查询DEMO

执行此操作

@media(min-width: 768px) {
  .custom-row p {
    text-align: right;
  }
}
@media(max-width: 768px) {
  .custom-row {
    text-align: center;
  }
}

Answer 2

我整理出来的东西可以继续使用。

http://codepen.io/simondavies/pen/jqjgxL

HTML

  <footer>
    <div class="footer-social-wrapper">
      <div class="social-wrapper">
        <div class="social-icons"><div class="facebook"></div></div>
        <div class="social-icons"><div class="twitter"></div></div>
        <div class="social-icons"><div class="youtube"></div></div>
     </div>
    </div>
    <div class="footer-copy">
      <p>&copy; 2016 Company Name. All Rights Reserved.</p>
    </div>
  </footer>

CSS：

  body {margin:0;padding:0;}
  footer,
  .social-wrapper {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: auto;
    position: relative;
    height: 50px;
  }
  footer:before,
  .social-wrapper:before,
  footer:after,
  .social-wrapper:after { content: " "; display: table;}
  footer:after,
  .social-wrapper:after {clear: both;}

  .footer-social-wrapper {
    margin:0;
    padding: 0;
    position: relative;
    float: left;
    width: 30%;
  }

  .footer-copy {
    margin:0;
    padding:0;
    position: relative;
    float: left;
    width: 70%;
    height: 50px;
  }
  .footer-copy {
    text-align: right;
  }

    .social-wrapper .social-icons {
      margin: 0px;
      position: relative;
      float: left;
      width: 33.333%;
      height: auto;
  }

    .social-wrapper .social-icons .facebook {
      margin: 0 auto;
      background:blue;
       width: 40px;
      height: 40px;
    }
    .social-wrapper .social-icons .twitter {
      margin: 0 auto;
      background: red;
        width: 40px;
      height: 40px;
    }
  .social-wrapper .social-icons .youtube {
    margin: 0 auto;
      background: yellow;
      width: 40px;
    height: 40px;
    }

  @media(max-width:700px){
    .footer-social-wrapper,
    .footer-copy {
      margin: 0 auto;
      width: 100%;
      text-align: center;
    }
  }

没有框架像bootstrap等工作。

Answer 3

在jumbotron内，创建另一个元素contentWrapper并将内容放入其中，然后为其添加媒体查询。您需要设置width和margin: auto以使其居中。

尝试将窗口宽度调整为800像素以下，您将看到内容对齐中心。

＆＃13;

#facebookLogo{
  float:left;
  width:30px; 
  height:30px;
  margin:5px;
}

#twitterLogo{
  float:left;
  width:40px;
  height:30px;
  margin:5px;
}

#youtubeLogo{
  float:left;
  width:40px;
  height:25px;
  margin:5px;
}

#footerFont{
  float:right;
  color:white;
  font-size:10px;
  padding-top:10px;padding-bottom:10px; text-align:right;
}

#footerJumbotron{
  background-color:black;border-radius: 0 !important; 
  height:100px !important;padding-top:30px;
}

@media (max-width: 800px) {
  .contentWrapper{
    width: 400px;
    margin: auto;
  }
}

＆＃13;

<div class="container">
  <div class = "grid">
    <div class="row">
      <div class="jumbotron" id="footerJumbotron">
        <div class="contentWrapper">
          <img src="ContactImages\facebookLogo.png" id="facebookLogo">
          <img src="ContactImages\twitterLogo.png" id="twitterLogo">
          <img src="ContactImages\youtubeLogo.png" id="youtubeLogo">
          <p id="footerFont">&copy; 2016 Company Name. All Rights Reserved.<br> Built & Managed by Company Name</p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 4

在 Bootstrap 4 中，您可以使用响应式对齐类，例如text-xs-center text-sm-left，而且您的代码具有高度重复性，请考虑以下内容：

＆＃13;

#footerJumbotron img {
  width: 30px;
  height: 30px;
  margin: 5px;
}

#footerFont {
  color: white;
  font-size: 10px;
}

#footerJumbotron {
  background-color: black;
  border-radius: 0 !important;
  text-align: center;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="grid">
    <div class="row">
      <div class="container-fluid jumbotron" id="footerJumbotron">
        <div class="col-sm-6 text-sm-left">
          <img src="ContactImages\facebookLogo.png" id="facebookLogo">
          <img src="ContactImages\twitterLogo.png" id="twitterLogo">
          <img src="ContactImages\youtubeLogo.png" id="youtubeLogo">
        </div>
        <div class="col-sm-6 text-sm-right">
          <p id="footerFont">&copy; 2016 Company Name. All Rights Reserved.
          <br> Built &amp; Managed by Company Name</p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

jsFiddle：https://jsfiddle.net/azizn/veyytd6u/

*如果您的页脚是动态的，则无需设置固定高度（移动时有2行，高度必须更改，因此请自动保留）

*考虑转义HTML中的& =＆gt; &

如何动态更改元素对齐？

4 个答案: