ブートストラップ：列間に等しい長さの線を追加するにはどうすればよいですか？

私は正常に列の間に行を追加しましたが、行の長さは等しくなく、ページが奇妙に見えます。ブートストラップ：列間に等しい長さの線を追加するにはどうすればよいですか？

私が欲しいのは、これは、私も簡単に行の長さを調整することができます。ありがとう！

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

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

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

<!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>

出典

2016-08-25 Jimmy Wong

add min-heightすべてのセクション –

あなたが境界線の長さが等しくなるようにしたい場合は、コンポーネントの高さは、同様に等しくなければなりません。

固定高さを設定するか、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>

出典

2016-08-25 09:13:08

ブートストラップ：列間に等しい長さの線を追加するにはどうすればよいですか？

答えて

関連する問題