CSS Image引導樣式內容

我一直在嘗試將圖像添加到引導程序中，以便在將窗口大小調整爲移動視圖時可以減小其大小。CSS Image引導樣式內容

到目前爲止，這是我的代碼::

<html> 
<head> 
<link href="user-profile-css/bootstrap.min.css" rel="stylesheet"> 
<!-- bootstrap theme --> 
<link href="user-profile-css/bootstrap-theme.css" rel="stylesheet"> 
<!--external css--> 
<!-- font icon --> 
<link href="user-profile-css/elegant-icons-style.css" rel="stylesheet" /> 
<link href="user-profile-css/font-awesome.min.css" rel="stylesheet" />  
<!-- full calendar css--> 
<link href="assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" /> 
<link href="assets/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" /> 
<!-- easy pie chart--> 
<link href="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/> 
<!-- owl carousel --> 
<link rel="stylesheet" href="user-profile-css/owl.carousel.css" type="text/css"> 
<link href="user-profile-css/jquery-jvectormap-1.2.2.css" rel="stylesheet"> 
<!-- Custom styles --> 
<link rel="stylesheet" href="user-profile-css/fullcalendar.css"> 
<link href="user-profile-css/widgets.css" rel="stylesheet"> 
<link href="user-profile-css/style.css" rel="stylesheet"> 
<link href="user-profile-css/style-responsive.css" rel="stylesheet" /> 
<link href="user-profile-css/xcharts.min.css" rel=" stylesheet">  
<link href="user-profile-css/jquery-ui-1.10.4.min.css" rel="stylesheet"> 
</head> 
<body> 
<section id="main-content"> 
      <section class="wrapper">    
       <div class="row"> 
       <div class="col-lg-12"> 
        <img alt="img-responsive" class="img-responsive" src="images/mainicons/couponbox.png"> 
       </div> 
       </div> 
      </section> 
</section> 
<script src="user-profile-js/jquery.js"></script> 
<script src="user-profile-js/jquery-ui-1.10.4.min.js"></script> 
<script src="user-profile-js/jquery-1.8.3.min.js"></script> 
<script type="text/javascript" src="user-profile-js/jquery-ui-1.9.2.custom.min.js"></script> 
<!-- bootstrap --> 
<script src="user-profile-js/bootstrap.min.js"></script> 
<!-- nice scroll --> 
<script src="user-profile-js/jquery.scrollTo.min.js"></script> 
<script src="user-profile-js/jquery.nicescroll.js" type="text/javascript"></script> 
<!-- charts scripts --> 
<script src="assets/jquery-knob/js/jquery.knob.js"></script> 
<script src="user-profile-js/jquery.sparkline.js" type="text/javascript"></script> 
<script src="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script> 
<script src="user-profile-js/owl.carousel.js" ></script> 
<!-- jQuery full calendar --> 
<<script src="user-profile-js/fullcalendar.min.js"></script> <!-- Full Google Calendar - Calendar --> 
<script src="assets/fullcalendar/fullcalendar/fullcalendar.js"></script> 
<!--script for this page only--> 
<script src="user-profile-js/calendar-custom.js"></script> 
<script src="user-profile-js/jquery.rateit.min.js"></script> 
<!-- custom select --> 
<script src="user-profile-js/jquery.customSelect.min.js" ></script> 
<script src="assets/chart-master/Chart.js"></script> 
</body> 
</html>

現在什麼樣式的標籤，使得它移動兼容視圖。

來源

2017-02-04 harishk

添加'img-responsive'。 –

Bootstrap有一個輔助工具類img-responsive。

<img class="img-responsive" alt="" src="new folder/couponbox.png">

PS。我相信你做到了，但不管怎樣，不要忘記將col-*-*類設置爲div.row以下的div。

來源

2017-02-04 06:50:24 Uzbekjon

以及我認爲應該添加在標籤上的自舉鏈接怎麼樣？ – harishk

[Here]（http://getbootstrap.com/getting-started/）你走了。這都是有據可查的。 – Uzbekjon

但它仍然不起作用 – harishk

CSS Image引導樣式內容

回答

相關問題