Question

我正在尝试拆分我的页脚，因此一部分是一种颜色而页脚的另一部分是另一种颜色。我正在使用bootstrap，并试过我的页脚内的行。不要认为两次使用页脚标记是合乎逻辑的。

希望我的页脚像这张图片一样分割。 enter image description here

到目前为止，我已完成了一些代码：

<!-- Foooter
================== -->
    <div class="footer">
        <div class="container">
            <div class="row">
                <!-- Contact us form -->
                <div class="col-sm-4">
                    <div class="headline">
                        <h3>Text here</h3>
                    </div>
                    <hr />
                    <div class="content">
                        <p>
                            Text here
                        </p>
                    </div>
                </div>
                <!-- Go social -->
                <div class="col-sm-4">
                    <div class="headline">
                        <h3>Text here</h3>
                    </div>
                    <hr />
                    <div class="content">
                        <p>
                            Text here
                        </p>
                        <ul>
                            <li><a href="#"><i class="fa fa-twitter"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-facebook"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-youtube"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-github"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-vk"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- Subscibe -->
                <div class="col-sm-4">
                    <div class="headline">
                        <h3>Text here</h3>
                    </div>
                    <hr />
                    <div class="content">
                        <p>
                            Text here
                        </p>
                        <div class="form-group">
                            <ul>
                                <li>
                                    <asp:TextBox runat="server" ID="TextBox1" Width="150px" CssClass="form-control" />
                                </li>
                                <li>
                                    <button runat="server" type="submit" class="my-btn">OK</button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="lastcontent">
                         <p>&copy; Text here 2015. <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

在我的Css文件中，我创建了这一行：

.lastcontent p {
    background-color: blue;
    color: white;
}

这使它变为蓝色，但宽度不是100％。

正如你所看到的，我在底部的页脚中又创建了一行，但这不起作用。为了用两种颜色完成这个页脚，还有什么我应该做的吗？

Answer 1

为什么你不能这样使用？

＆＃13;

body {margin: 0;}
.primary {background-color: #00f; color: #fff;}
.secondary {background-color: #99f; color: #000;}
p {margin: 0; font: 10pt verdana; padding: 15px; text-align: center;}

＆＃13;

<footer>
  <div class="primary">
    <p>This is a single Footer tag!</p>
    <p>You can use bootstrap's <code>.col-md-4</code> for a three column one.</p>
  </div>
  <div class="secondary">
    <p>This is a different colour Footer</p>
  </div>
</footer>

＆＃13;

需要帮助在我的页脚中实现两个不同的区域（颜色）

1 个答案: