ブートストラップ - コンテナ流体クラスの問題の内部タグのサイズを変更

私はブートストラップフレームワークを使用してBoxコンテナを作成しています。コンテナの幅のみがサイズ変更されています。私たちは、ブラウザウィンドウのサイズを変更する際に容器内部だけでなく、内側のタグは、すべての4つの側面から、サイズ変更を取得する必要がありブートストラップ - コンテナ流体クラスの問題の内部タグのサイズを変更

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

に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

参照リンクを確認してブラウザのサイズを変更してください。私はまったく同じことをしようとしています http://publicis.sapient.com/en-us.html –

ブートストラップ - コンテナ流体クラスの問題の内部タグのサイズを変更

答えて

関連する問題