Question

我已经在列之间成功添加了一行，但是，行的长度不相等，使页面看起来很奇怪。

我想要的是这个，我也可以轻松调整线的长度。谢谢！

＆＃13;

#firstPart{
  border-right: 1px solid #ccc;
}

#secondPart{
  border-right: 1px solid #ccc;
}

#thirdPart {
  border-right: 1px solid #ccc;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>Bo Kei Tuck Shop</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
        <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>   <!--Google Font API-->
        <link rel="stylesheet" type="text/css" href="stylesheet.css">    <!--CSS-->
        <script type='text/javascript' src='javascript/jquery-3.1.0.js'></script>   <!--jQuery-->
        <script type='text/javascript' src='javascript/jquery-ui.min.js'></script>  <!--jQuery-->
        <meta name="description" content="Free Web tutorials">  <!--meta description-->
        <meta name="keywords" content="HTML,CSS,XML,JavaScript">    <!--meta keywords-->
        <meta name="content-language" content="en-US">
    </head>
  
  <footer>
            <div id=footerNormal>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-3 text-center" id="firstPart">
                            <p><a href="navigation_bar/about_us.html">About Us</a></p>
                            <p><a href="navigation_bar/hot_food.html">Hot Food</a></p>
                            <p><a href="navigation_bar/cold_food.html">Cold Food</a></p>
                            <p><a href="navigation_bar/snacks.html">Snacks</a></p>
                            <p><a href="navigation_bar/drinks.html">Drinks</a></p>
                            <p><a href="navigation_bar/contact_us.html">Contact Us</a></p>
                        </div>
                        <div class="col-sm-3 text-center" id="secondPart">
                            <p>E1 Aérogare fret de Rochambeau, Matoury 97351, French Guiana</p>
                            <p>Mon-Sat: 0700-1300, 1300-1800</p>
                            <p>Sun: 0700-1300</p>
                        </div>
                        <div class="col-sm-3" id="thirdPart">
                            <p class="text-center">JOIN OUR E-CLUB</p>
                            <p class="text-center">Receive exclusive special offers & discounts throughout the year and a special gift on your birthday.</p>
                            <div class="form-group">
                                <label for="email">Email:</label>
                                <input type="email" class="form-control" id="email" placeholder="Enter email">
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </div>
                        <div class="col-sm-3 text-center" id="fourthPart">
                            <p>Connect with us</p>
                            <p>Order Now</p>
                            <p>0594 28 02 94</p>
                        </div>
                    </div>
                </div>
              </footer>

＆＃13;

Answer 1

如果您希望边框的长度相等，则组件的高度也必须相等。

您可以设置固定高度或使用jQuery Match Height之类的jQuery插件来确保高度始终相同。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>

<script type="text/javascript">
    $('.components-class-name').matchHeight();
</script>

Bootstrap：如何在列之间添加相等长度的线？

1 个答案: