Fatal编程技术网
  • html/
  • Html 在页脚上一行显示5列-引导

Html 在页脚上一行显示5列-引导

html twitter-bootstrap css

Html 在页脚上一行显示5列-引导,html,twitter-bootstrap,css,Html,Twitter Bootstrap,Css,嗨，我试图在页脚的一行中显示5个响应行，但它似乎并没有完全按照我想要的方式工作 这是我的密码 <footer> <div class="container"> <div class="row"> <div class="col-sm-8"> <div class="col-md-2 customer"> <h3>

嗨，我试图在页脚的一行中显示5个响应行，但它似乎并没有完全按照我想要的方式工作

这是我的密码

<footer>

    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                <div class="col-md-2 customer">
                <h3>Customer Service</h3>
                <p>Unit 36/65 Marigold St,Revesby
                NSW 2212 <br>
                P | (02) 9773 8773
                <br>
                F | (02) 977 8125
                <br>
                E | info@trevell.com.au</p>
                </div>
                <div class="col-md-2 col-md-offset-1 company">
                    <h3>The Company</h3>
                  <ul>
                      <li><a href=""></a>Our Profile</li>
                      <li><a href=""></a>Home Designs</li>
                      <li><a href=""></a>Showcase</li>
                      <li><a href=""></a>Commercial</li>
                      <li><a href=""></a>Career</li>
                      <li><a href=""></a>Blog</li>
                      <li><a href=""></a>Terms & Conditions</li>
                  </ul>
                </div>
                <div class="col-md-2 dc">
                    <h3>Our Display Center</h3>
                    <ul>
                        <li><a href=""></a>Freemans Ridge Estate</li>
                        <li><a href=""></a>Homeworld Camden South</li>
                        <li><a href=""></a>Brooks Beach Estate Horsley</li>
                    </ul>
                </div>
                <div class="col-md-2 lp">
                    <h3>House & Land Packages</h3>
                    <ul>
                        <li><a href=""></a>House & Land Packages</li>
                        <li><a href=""></a>Display Home for Sale</li>

                    </ul>
                </div>
    <div class="col-md-2 nl">
        <h3>Newsletter</h3>
        <p>Be the first to know about Trevelle Special offers</p>
        <i class="fa fa-envelope fa-2x"></i>
    </div>
            </div>
        </div>
    </div>


    </footer>


客户服务
雷夫斯比万寿菊街36/65号公寓
新南威尔士州2212

P |（02）97738773


（02）9778125


E|info@trevell.com.au

公司

    

  • 我们的简介
    • 

  • 家居设计
    • 

  • 展示
    • 

  • 商业的
    • 

  • 事业
    • 

  • 博客
    • 

  • 条款与条件
    • 


我们的展示中心

    

  • 弗里曼山脊庄园酒店
    • 

  • 卡姆登南家园酒店
    • 

  • 霍斯利布鲁克斯海滩酒店
    • 


房屋和土地包

    

  • 房屋和土地包
    • 

  • 展销房屋
    • 


新闻稿
第一个了解Trevelle特别优惠
我甚至试图用
col-md-3
替换
col-md-2
，但最后一列移到下一行。这是我试图制作的精确的附件图像，如下图所示

CSS:

HTML:


第1栏
第2栏
第3栏
第4栏
第5栏
这里有

试试这个

<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-2 customer">
                <h3>Customer Service</h3>
                <p>Unit 36/65 Marigold St,Revesby
                NSW 2212 <br>
                P | (02) 9773 8773
                <br>
                F | (02) 977 8125
                <br>
                E | info@trevell.com.au</p>
            </div>
            <div class="col-md-2 company">
                <h3>The Company</h3>
                <ul>
                    <li><a href=""></a>Our Profile</li>
                    <li><a href=""></a>Home Designs</li>
                    <li><a href=""></a>Showcase</li>
                    <li><a href=""></a>Commercial</li>
                    <li><a href=""></a>Career</li>
                    <li><a href=""></a>Blog</li>
                    <li><a href=""></a>Terms & Conditions</li>
                </ul>
            </div>
            <div class="col-md-3 dc">
                <h3>Our Display Center</h3>
                <ul>
                    <li><a href=""></a>Freemans Ridge Estate</li>
                    <li><a href=""></a>Homeworld Camden South</li>
                    <li><a href=""></a>Brooks Beach Estate Horsley</li>
                </ul>
            </div>
            <div class="col-md-3 lp">
                <h3>House & Land Packages</h3>
                <ul>
                    <li><a href=""></a>House & Land Packages</li>
                    <li><a href=""></a>Display Home for Sale</li>
                </ul>
            </div>
            <div class="col-md-2 nl">
                <h3>Newsletter</h3>
                <p>Be the first to know about Trevelle Special offers</p>
                <i class="fa fa-envelope fa-2x"></i>
            </div>
        </div>
    </div>
</footer>


客户服务
雷夫斯比万寿菊街36/65号公寓
新南威尔士州2212

P |（02）97738773


（02）9778125


E|info@trevell.com.au

公司

    

  • 我们的简介
    • 

  • 家居设计
    • 

  • 展示
    • 

  • 商业的
    • 

  • 事业
    • 

  • 博客
    • 

  • 条款与条件
    • 


我们的展示中心

    

  • 弗里曼山脊庄园酒店
    • 

  • 卡姆登南家园酒店
    • 

  • 霍斯利布鲁克斯海滩酒店
    • 


房屋和土地包

    

  • 房屋和土地包
    • 

  • 展销房屋
    • 


新闻稿
第一个了解Trevelle特别优惠
您不应该在
行下使用嵌套
列
，并将
行
加号的所有子项保留为12
Brilliant man！。还有一件事，我可以在column1中添加小谷歌地图吗？无论如何，再次谢谢你。

<div class="col-sm-12">
  <div class="row">
  <div class="col-sm-7 seven-three">
    <div class="row">
      <div class="col-sm-4" style="background-color:#000;">Column 1</div>
      <div class="col-sm-4" style="background-color:#333;">Column 2</div>
      <div class="col-sm-4" style="background-color:#444;">Column 3</div>
    </div>
  </div>
  <div class="col-sm-5 five-two">
    <div class="row">
      <div class="col-sm-6" style="background-color:#555;">Column 4</div>
      <div class="col-sm-6" style="background-color:#666;">Column 5</div>
    </div>
  </div>
  </div>
</div>



<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-2 customer">
                <h3>Customer Service</h3>
                <p>Unit 36/65 Marigold St,Revesby
                NSW 2212 <br>
                P | (02) 9773 8773
                <br>
                F | (02) 977 8125
                <br>
                E | info@trevell.com.au</p>
            </div>
            <div class="col-md-2 company">
                <h3>The Company</h3>
                <ul>
                    <li><a href=""></a>Our Profile</li>
                    <li><a href=""></a>Home Designs</li>
                    <li><a href=""></a>Showcase</li>
                    <li><a href=""></a>Commercial</li>
                    <li><a href=""></a>Career</li>
                    <li><a href=""></a>Blog</li>
                    <li><a href=""></a>Terms & Conditions</li>
                </ul>
            </div>
            <div class="col-md-3 dc">
                <h3>Our Display Center</h3>
                <ul>
                    <li><a href=""></a>Freemans Ridge Estate</li>
                    <li><a href=""></a>Homeworld Camden South</li>
                    <li><a href=""></a>Brooks Beach Estate Horsley</li>
                </ul>
            </div>
            <div class="col-md-3 lp">
                <h3>House & Land Packages</h3>
                <ul>
                    <li><a href=""></a>House & Land Packages</li>
                    <li><a href=""></a>Display Home for Sale</li>
                </ul>
            </div>
            <div class="col-md-2 nl">
                <h3>Newsletter</h3>
                <p>Be the first to know about Trevelle Special offers</p>
                <i class="fa fa-envelope fa-2x"></i>
            </div>
        </div>
    </div>
</footer>