Question

＆＃13;

body { 
    padding-top: 68px; 
}

#use {
	position:relative;
	top: 7px;
}

.i1 {
	position: relative;
	bottom: 6px;
}

#my-navbar {
	background:white;	
}

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

.icon-bar {
	background:#000000;
}
    .caption {
        width:30%;
		height:auto;
		text-align:left;
		left:110px;
        position: absolute;
		top: 70px;
		
	}

    .thumbnail {
        border: 0 none;
        box-shadow: none;
        margin:0;
        padding:0;
    }

    .caption h4 {
        color:#228B22;
		font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
		font-size:34px;
		font-weight:900;
        -webkit-font-smoothing: antialiased;
    }


@media only screen and (max-width: 528px) {
    .caption {
        width:30%;
		height:auto;
		text-align:left;
		left:110px;
        position: absolute;
		top: 70px;
		background: white;
		
	}
	
	   .caption h4 {
        color:#228B22;
		font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
		font-size:10px;;
		font-weight:700;
        -webkit-font-smoothing: antialiased;
    }
}

div.c2 {
	position:relative;
	display:inline-block;
	bottom: 573px;
	left: 150px;
	
}

@media only screen and (max-width: 1255px) {

div.fixed_width {
        min-height:20px;
		min-width:20px;
	
}	

}

＆＃13;

<!DOCTYPE html>
<html>

<head>
<title> Pakistan Tourism </title>
<meta name="description" content="Pakistan Tourism">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="home.css">
</head>

<body>

	<nav class="navbar navbar-fixed-top" id="my-navbar">

	<div class="c0">
    <div class="navbar-header">
    
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
  
   
	</button>
    </div>
    
    <div class="collapse navbar-collapse" id="navbar-collapse" >
    	
        <ul class="nav navbar-nav">
        		<li><a href="#"><img id="use" src="pakistan.jpg" alt="Pakistan" width="150" height="35" class="img-responsive"></a></li>
      	</ul>
        
        <ul class="nav navbar-nav">    
        		<li><a href="#DISCOVER"> DISCOVER </a> </li>
                <li><a href="#SHOP, DINE, RELAX"> SHOP, DINE, RELAX </a> </li>
                <li><a href="#SET, THRILL, PLAY"> SET, THRILL, PLAY </a> </li>
                <li><a href="#TRAVEL PLANNING"> TRAVEL PLANNING </a> </li>
    	</ul>
		<ul class="nav navbar-nav">
                <li><a href="#"><img src="calendar.jpg" alt="Calendar" width="50" height="50" class="img-responsive navbar-left i1"></a></li>
                <li><a href="#"><img src="planner.jpg" alt="Planner" width="74" height="50" class="img-responsive navbar-left i1"></a></li>
        </ul>
    </div>
    </div>    
	</nav>
 
  <div class="conainer" style="margin:20px;">
        <div class=" col-sm-12 row">
            <div class="col-sm-12">
                <div class="col-sm-12 thumbnail text-center">
                    <img alt="" class="img-responsive" src="islamiaUniversity.jpg" width="1200">

                    <div class="caption">
                        <h4>Discover All<br> that's Possible<br> in Pakistan</h4>
                    </div>
                </div>
            </div>
  		</div>
    </div>

<div class="c2">
	<div class="fixed_width">
<img  src="button1.png" alt="things to do">
<br>
<br>
<img  src="button2.png" alt="plan your trip">
	</div>
</div>

<script src="../../shortcuts/jquery-1.12.3.js"> </script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

＆＃13;

我有一个小图像放在另一个图像上（两个都在不同的div中），当我调整我的浏览器窗口时，它会离开窗口。我希望它保持完整，我怎样才能做到这一点？ button1和button2是两个图像，我希望它们保持完整。

为什么我的图像响应浏览器窗口的大小调整，虽然它只有20像素宽？

0 个答案: