Bootstrap列内容

时间：2017-04-11 04:22:17

标签： html css twitter-bootstrap

Hello 我使用bootstrap创建了一个简单的列，但是如果第一列的内容很大，第三列将在右侧浮动，则会出现问题：

#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>penciltheme@gmail.com</h4>
        </div>
      </div>
    </div>
  </div>
</section>

注意：请在全屏

中运行代码段

5 个答案:

答案 0 :(得分：0)

＆＃13;
＆＃13; 
<!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>penciltheme@gmail.com</h4>
                </div>
            </div>
        </div>
    </div>
</section>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

使用 <?php $dirname = "pdf/";// Directory path $file = glob($dirname."*pdf"); foreach($file as $string){ //header("Pragma: public", true); header("Expires: 0"); // set expiration time header("Cache-Control: must-revalidate, post-check=0, pre-check=0"); header("Content-Type: application/force-download"); header("Content-Type: application/octet-stream"); header("Content-Type: application/download"); header("Content-Disposition: inline; filename=".basename($string)); header("Content-Transfer-Encoding: binary"); header("Content-Length: ".filesize($string)); die(file_get_contents($string)); } ?> 。因为 col-lg-4 在你的时间和引导列12中使用，所以你的最后一个div在线下面。所以我建议您可以使用 col-lg-6 三行，然后管理所有列。

Bootstrap Grid 

col-lg-4
#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;
}

答案 2 :(得分：0)

如果要在新浮点数中添加内容，则需要使用class = row。它将有助于解决此类问题。

#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>penciltheme@gmail.com</h4>
                        </div>
                    </div>
                </div>
            </div>
        </section>

答案 3 :(得分：0)

您可以使用此代码<div class="clearfix visible-sm"></div>，此代码将清除小屏幕中的浮动：

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<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>penciltheme@gmail.com</h4>
                    </div>
                </div>
            </div>
        </div>
    </section>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

bootstrap的网格系统分为12个，这里是一个例子：

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

如果你想制作3列，你应该在divs'类中使用col-lg-4而不是6。

相关问题
最新问题