1. 首頁
  2. 問答
  3. 引導欄內容

引導欄內容

2017-04-11 98 views
2

你好我創建使用自舉一個簡單的列，但也有問題，如果第一列的內容是大的第三列將在右邊浮動：引導欄內容

#contact-me { 
 
    width: 100%; 
 
    padding: 40px 0; 
 
    /*font-family:Raleway, Arial, 'Open Sans';*/ 
 
} 
 

 
#contact-me .contact-info-nested { 
 
    width: 100%; 
 
    margin-bottom: 20px; 
 
    text-align: center; 
 
} 
 

 
#contact-me .contact-info-nested i { 
 
    display: inline-block; 
 
    margin-bottom: 16px; 
 
    font-size: 50px; 
 
} 
 

 
#contact-me .contact-info h4 { 
 
    padding: 5px; 
 
    font-size: 16px; 
 
    line-height: 25px; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<section id="contact-me"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4 col-sm-6"> 
 
     <div class="contact-info-nested"> 
 
      <i class="fa fa-map-marker"></i> 
 
      <h4>Bak-One Company 12345 Hollywood Bvld Street Los Angeles, California</h4> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4 col-sm-6"> 
 
     <div class="contact-info-nested"> 
 
      <i class="fa fa-phone"></i> 
 
      <h4>+93 345 678 91 23</h4> 
 
     </div> 
 
     </div> 
 
     <div class="clearfix"> </div> 
 
     <div class="col-md-4 col-sm-6"> 
 
     <div class="contact-info-nested"> 
 
      <i class="fa fa-envelope-o"></i> 
 
      <h4>[email protected]</h4> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

注：請運行在全屏

來源

2017-04-11 Michael Neas

+0

你想要做什麼用col-lg-4？所有在同一行或什麼？ – aavrug

+0

你想用它做什麼？第三個內容應該在左邊還是在第一行？ –

+0

我需要第三列工作良好的默認行爲，即將離開不正確！ –

回答

0 

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
    <style> 
 
     #contact-me { 
 
      width: 100%; 
 
      padding: 40px 0; 
 
      /*font-family:Raleway, Arial, 'Open Sans';*/ 
 
     } 
 

 
     #contact-me .contact-info-nested { 
 
      width: 100%; 
 
      margin-bottom: 20px; 
 
      text-align: center; 
 
     } 
 

 
     #contact-me .contact-info-nested i { 
 
      display: inline-block; 
 
      margin-bottom: 16px; 
 
      font-size: 50px; 
 
     } 
 

 
     #contact-me .contact-info h4 { 
 
      padding: 5px; 
 
      font-size: 16px; 
 
      line-height: 25px; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 

 
<section id="contact-me"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-sm-4"> 
 
       <div class="contact-info-nested"> 
 
        <i class="fa fa-map-marker"></i> 
 
        <h4>Bak-One Company 12345 Hollywood Bvld Street Los Angeles, California</h4> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
       <div class="contact-info-nested"> 
 
        <i class="fa fa-phone"></i> 
 
        <h4>+93 345 678 91 23</h4> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
       <div class="contact-info-nested"> 
 
        <i class="fa fa-envelope-o"></i> 
 
        <h4>[email protected]</h4> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section> 
 
</body> 
 
</html>
代碼段

來源

2017-04-11 04:31:32

0

使用col-lg-4。因爲col-lg-6在你用的時間和引導列12然後你最後一個div下面一行。所以我建議你可以使用col-lg-4三行然後管理所有列。

Bootstrap Grid

#contact-me { 
 
width:100%; 
 
padding:40px 0; 
 
/*font-family:Raleway, Arial, 'Open Sans';*/ 
 
} 
 
#contact-me .contact-info-nested{ 
 
    width:100%; 
 
    margin-bottom:20px; 
 
    text-align:center; 
 
} 
 
#contact-me .contact-info-nested i{ 
 
    display:inline-block; 
 
    margin-bottom:16px; 
 
    font-size:50px; 
 
} 
 
#contact-me .contact-info h4{ 
 
    padding:5px; 
 
    font-size:16px; 
 
    line-height:25px; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<section id="contact-me"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-lg-4"> 
 
        <div class="contact-info-nested"> 
 
         <i class="fa fa-map-marker"></i> 
 
         <h4>Bak-One Company 12345 Hollywood Bvld Street Los Angeles, California</h4> 
 
        </div> 
 
       </div> 
 
       <div class="col-lg-4"> 
 
        <div class="contact-info-nested"> 
 
         <i class="fa fa-phone"></i> 
 
         <h4>+93 345 678 91 23</h4> 
 
        </div> 
 
       </div> 
 
       <div class="clear"></div> 
 
       <div class="col-lg-4"> 
 
        <div class="contact-info-nested"> 
 
         <i class="fa fa-envelope-o"></i> 
 
         <h4>[email protected]</h4> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </section>

來源

2017-04-11 04:42:12

+0

謝謝，但問題將出現在響應媒體屏幕！ –

+0

我試圖使用clearfix類，但我需要使用clearfix類與col-sm類 –

+0

什麼是媒體屏幕上的問題請簡要 –

0

用戶行時要添加新的浮動內容，您需要使用類=行。這將有助於解決這類問題。

#contact-me { 
 
     width:100%; 
 
     padding:40px 0; 
 
     /*font-family:Raleway, Arial, 'Open Sans';*/ 
 
     } 
 
     #contact-me .contact-info-nested{ 
 
      width:100%; 
 
      margin-bottom:20px; 
 
      text-align:center; 
 
     } 
 
     #contact-me .contact-info-nested i{ 
 
      display:inline-block; 
 
      margin-bottom:16px; 
 
      font-size:50px; 
 
     } 
 
     #contact-me .contact-info h4{ 
 
      padding:5px; 
 
      font-size:16px; 
 
      line-height:25px; 
 
     }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
    <section id="contact-me"> 
 
      <div class="container"> 
 
       <div class="row"> 
 
        <div class="col-lg-6"> 
 
         <div class="contact-info-nested"> 
 
          <i class="fa fa-map-marker"></i> 
 
          <h4>Bak-One Company 12345 Hollywood Bvld Street Los Angeles, California</h4> 
 
         </div> 
 
        </div> 
 
        <div class="col-lg-6"> 
 
         <div class="contact-info-nested"> 
 
          <i class="fa fa-phone"></i> 
 
          <h4>+93 345 678 91 23</h4> 
 
         </div> 
 
        </div> 
 
</div> 
 
<div class="row"> 
 
        <div class="clear"></div> 
 
        <div class="col-lg-6"> 
 
         <div class="contact-info-nested"> 
 
          <i class="fa fa-envelope-o"></i> 
 
          <h4>[email protected]</h4> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </section>

來源

2017-04-11 04:51:18

0

您可以使用此代碼<div class="clearfix visible-sm"></div>此代碼將清除漂浮在小屏幕：

#contact-me { 
 
width:100%; 
 
padding:40px 0; 
 
/*font-family:Raleway, Arial, 'Open Sans';*/ 
 
} 
 
#contact-me .contact-info-nested{ 
 
    width:100%; 
 
    margin-bottom:20px; 
 
    text-align:center; 
 
} 
 
#contact-me .contact-info-nested i{ 
 
    display:inline-block; 
 
    margin-bottom:16px; 
 
    font-size:50px; 
 
} 
 
#contact-me .contact-info h4{ 
 
    padding:5px; 
 
    font-size:16px; 
 
    line-height:25px; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<section id="contact-me"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-md-4 col-sm-6"> 
 
        <div class="contact-info-nested"> 
 
         <i class="fa fa-map-marker"></i> 
 
         <h4>Bak-One Company 12345 Hollywood Bvld Street Los Angeles, California</h4> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-4 col-sm-6"> 
 
        <div class="contact-info-nested"> 
 
         <i class="fa fa-phone"></i> 
 
         <h4>+93 345 678 91 23</h4> 
 
        </div> 
 
       </div> 
 
       <div class="clearfix visible-sm"></div> 
 
       <div class="col-md-4 col-sm-6"> 
 
        <div class="contact-info-nested"> 
 
         <i class="fa fa-envelope-o"></i> 
 
         <h4>[email protected]</h4> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </section>

來源

2017-04-11 04:59:30

0

自舉的網格系統劃分在12，這裏有一個例子：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
     <div class="row"> 
 
\t \t \t \t <div class="col-lg-12"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h1>Column 1</h1> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-lg-6"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h1>Column 1</h1> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-6"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h1>Column 2</h1> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-lg-4"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h1>Column 1</h1> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-4"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h1>Column 2</h1> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-4"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h1>Column 3</h1> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-lg-3"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h1>Column 1</h1> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-3"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h1>Column 2</h1> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-3"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h1>Column 3</h1> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-3"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h1>Column 4</h1> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-lg-2"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h1>Column 1</h1> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-2"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h1>Column 2</h1> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-2"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h1>Column 3</h1> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-2"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h1>Column 4</h1> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-2"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h1>Column 5</h1> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-2"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h1>Column 6</h1> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-lg-1"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h4>Column 1</h4> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-1"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h4>Column 2</h4> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-1"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h4>Column 3</h4> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-1"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h4>Column 4</h4> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-1"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h4>Column 5</h4> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-1"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h4>Column 6</h4> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-1"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h4>Column 7</h4> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-1"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h4>Column 8</h4> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-1"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h4>Column 9</h4> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-1"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h4>Column 10</h4> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-1"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h4>Column 11</h4> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-1"> 
 
\t \t \t \t \t <center> 
 
\t \t \t \t \t \t <h4>Column 12</h4> 
 
\t \t \t \t \t </center> 
 
\t \t \t \t </div> 
 
\t \t \t </div>

如果你想3列，應在申報單類，而不是6

來源

2017-04-11 05:01:04

相關問題

 相關問題