1. 首页
  2. 问答
  3. 引导栏内容

引导栏内容

2017-04-11 107 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

相关问题

 相关问题