Question

尝试在引导程序中制作一些前端，但不知道我想要它。如何在页脚中将两个div放在另一个旁边？这就是我现在拥有的。我已尝试将两者放入<div class="row"> ..

<div id="section-footer" class="footer-wrap">
    <div class="container footer center">
        <div class="row">
            <div class="col-lg-12">
                <h4 class="footer-title"><!-- Footer Title -->
                    <a class="site-name" href="#"><span></span>Soc</a>
                </h4>

                <!-- Social Links -->
                <div class="social-icons">
                    <ul>
                        <li><a href="#"><i class="fa fa-facebook-square"></i>Link</a></li>
                        <li><a href="#"><i class="fa fa-twitter-square"></i>Link</a></li>
                        <li><a href="#"><i class="fa fa-google-plus-square"></i>Link</a></li>
                        <li><a href="#"><i class="fa fa-pinterest-square"></i>Link</a></li>
                        <li><a href="#"><i class="fa fa-flickr"></i>Link</a></li>
                        <li><a href="#"><i class="fa fa-linkedin-square"></i>Link</a></li>
                    </ul>
                </div>

                <p class="copyright">Soc &copy; 2015</p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="subscription-success"></p>
                <p class="subscription-failed"></p>
                <div class="col-md-10 col-md-offset-1 center section-title">
                    <h3>Subscribe</h3>
                </div>
                <form id="subscription-form">
                    <input type="email" name="EMAIL" required="required" placeholder="Email" class="input-email" />
                    <button type="submit" id="subscription-btn" class="fancy-button button-line button-white large zoom">
                        Reg
                        <span class="icon">
                            <i class="fa fa-sign-in"></i>
                        </span>
                    </button>
                </form>
            </div>
    </div>
</div>

和css

#section-footer {
padding-top: 80px;
padding-bottom: 80px;
background: #333;
color:#e5e5e5;
}

.footer-title {
display: inline-block;
margin-bottom: 40px;
text-transform: none;
}

.social-icons ul li {
display: inline-block;
}

.social-icons ul li a{
margin-left: 10px;
font-size: 28px;
color: #9D9D9D;
font-weight: normal;
text-shadow: none;

-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
transition: all .5s ease-in;
}

This is how it looks now

订阅表单必须位于Links ..

旁边

Answer 1

在此处查看网格系统上的bootstrap文档可能会有所帮助：bootstrap.com/css

试试这个......

<div id="section-footer" class="footer-wrap">
<div class="container footer center">
    <div class="row">
        <div class="col-md-6">
                <h4 class="footer-title"><!-- Footer Title -->
                    <a class="site-name" href="#"><span></span>Soc</a>
                </h4>
            <!-- Social Links -->
            <div class="social-icons">
                <ul>
                    <li><a href="#"><i class="fa fa-facebook-square"></i>Link</a>
                    </li>
                    <li><a href="#"><i class="fa fa-twitter-square"></i>Link</a>
                    </li>
                    <li><a href="#"><i class="fa fa-google-plus-square"></i>Link</a>
                    </li>
                    <li><a href="#"><i class="fa fa-pinterest-square"></i>Link</a>
                    </li>
                    <li><a href="#"><i class="fa fa-flickr"></i>Link</a>
                    </li>
                    <li><a href="#"><i class="fa fa-linkedin-square"></i>Link</a>
                    </li>
                </ul>
            </div>
            <p class="copyright">Soc &copy; 2015</p>
        </div>

    <div class="col-md-6">
        <p class="subscription-success"></p>
        <p class="subscription-failed"></p>
        <div class="col-md-10 col-md-offset-1 center section-title">
                <h3>Subscribe</h3>

        </div>
        <form id="subscription-form">
            <input type="email" name="EMAIL" required="required" placeholder="Email" class="input-email" />
            <button type="submit" id="subscription-btn" class="fancy-button button-line button-white large zoom">Reg    <span class="icon">
                            <i class="fa fa-sign-in"></i>
                        </span>

            </button>
        </form>
    </div>
               </div>
</div>

页脚元素在引导程序中彼此相邻

1 个答案: