1. 首頁
  2. 問答
  3. Bootstrap - 調整容器內流體類問題的內部標記

Bootstrap - 調整容器內流體類問題的內部標記

2017-02-11 39 views
0

我使用Bootstrap框架創建Box容器。只有容器寬度正在調整大小。我想容器以及內標籤裏面應該從所有4個方面調整，當我們調整瀏覽器窗口Bootstrap - 調整容器內流體類問題的內部標記

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <title>Bootstrap 101 Template</title> 
 

 
    <!-- Bootstrap --> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 
    
 
    <style> 
 
    body { 
 
    background-color: #f4f0ec; } 
 

 
.padding-zero { 
 
    padding: 0px; } 
 

 
.square-border { 
 
    border: #000 solid 3.5px; } 
 

 
ul.no-left-border-style { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    border-right: #000 solid 3.5px; } 
 
    ul.no-left-border-style li { 
 
    list-style-type: none; 
 
    padding: 30px 31px 31px 31px; 
 
    border-bottom: #000 solid 3.5px; } 
 
    ul.no-left-border-style li:last-child { 
 
    border-bottom: none; } 
 

 
ul.no-right-border-style { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    border-left: #000 solid 3.5px; } 
 
    ul.no-right-border-style li { 
 
    list-style-type: none; 
 
    padding: 30px 31px 31px 31px; 
 
    border-bottom: #000 solid 3.5px; } 
 
    ul.no-right-border-style li:last-child { 
 
    border-bottom: none; } 
 

 
.fa { 
 
    font-size: 30px !important; 
 
    color: #2a2b2a; } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
     <div class="col-md-3 col-lg-3">Eveniet, voluptatem.</div> 
 
     <div class="col-md-3 col-lg-3 col-xs-12 padding-zero square-border"> 
 
      <div class="pull-left"> 
 
      <ul class="no-left-border-style"> 
 
       <li><i class="fa fa-heartbeat"></i></li> 
 
       <li><i class="fa fa-heartbeat"></i></li> 
 
       <li><i class="fa fa-heartbeat"></i></li> 
 
       <li><i class="fa fa-heartbeat"></i></li> 
 
      </ul> 
 
      </div> 
 
      <div class="clear-fix"></div> 
 
     </div> 
 
     
 
     <div class="col-md-3 col-lg-3">Cupiditate, dolore.</div> 
 
     <div class="col-md-3 col-lg-3 padding-zero square-border"> 
 
      <div class="pull-right"> 
 
      <ul class="no-right-border-style"> 
 
       <li><i class="fa fa-heartbeat"></i></li> 
 
       <li><i class="fa fa-heartbeat"></i></li> 
 
       <li><i class="fa fa-heartbeat"></i></li> 
 
       <li><i class="fa fa-heartbeat"></i></li> 
 
      </ul> 
 
      </div> 
 
      <div class="clear-fix"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    </body> 
 
</html>

來源

2017-02-11 Harshad Patil

回答

0

Hellow你的意思是，像這樣的事情？

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Bootstrap 101 Template</title> 

    <!-- Bootstrap --> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 

    <style> 
    body { 
    background-color: #f4f0ec; } 

.padding-zero { 
    padding: 0px; } 

.square-border { 
    border: #000 solid 3.5px; } 

ul.no-left-border-style { 
    padding: 0px; 
    margin: 0px; 
    border-right: #000 solid 3.5px; } 
    ul.no-left-border-style li { 
    list-style-type: none; 
    padding: 30px 31px 31px 31px; 
    border-bottom: #000 solid 3.5px; } 
    ul.no-left-border-style li:last-child { 
    border-bottom: none; } 

ul.no-right-border-style { 
    padding: 0px; 
    margin: 0px; 
    border-left: #000 solid 3.5px; } 
    ul.no-right-border-style li { 
    list-style-type: none; 
    padding: 30px 31px 31px 31px; 
    border-bottom: #000 solid 3.5px; } 
    ul.no-right-border-style li:last-child { 
    border-bottom: none; } 

.fa { 
    font-size: 30px !important; 
    color: #2a2b2a; } 
    </style> 
    </head> 
    <body> 
    <div class="container-fluid"> 
     <div class="row"> 
     <div class="col-md-2 col-lg-2">Eveniet, voluptatem.</div> 
     <div class="col-md-2 col-lg-2 col-xs-12 padding-zero square-border"> 
      <div class="pull-left col-xs-12"> 
      <ul class="no-left-border-style"> 
       <li><i class="fa fa-heartbeat"></i></li> 
       <li><i class="fa fa-heartbeat"></i></li> 
       <li><i class="fa fa-heartbeat"></i></li> 
       <li><i class="fa fa-heartbeat"></i></li> 
      </ul> 
      </div> 
      <div class="clear-fix"></div> 
     </div> 

     <div class="col-md-4 col-lg-4">Cupiditate, dolore.</div> 
     <div class="col-md-4 col-lg-4 padding-zero square-border"> 
      <div class="pull-right"> 
      <ul class="no-right-border-style"> 
       <li><i class="fa fa-heartbeat"></i></li> 
       <li><i class="fa fa-heartbeat"></i></li> 
       <li><i class="fa fa-heartbeat"></i></li> 
       <li><i class="fa fa-heartbeat"></i></li> 
      </ul> 
      </div> 
      <div class="clear-fix"></div> 
     </div> 
     </div> 
    </div> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </body> 
</html>

來源

2017-02-11 08:05:56

+0

請檢查下面的參考鏈接，並嘗試調整瀏覽器的大小。我正在嘗試完全相同 http://publicis.sapient.com/en-us.html –

相關問題

 相關問題