Question

我只是学习bootstrap，我有这样的HTML代码：

<!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="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.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
    <style>

       .bodinya { background-image:url(IMG_5555.jpg);
               background-size: cover; 
               background-repeat: no-repeat;
        }
   </style>
   <div class="navbar navbar-default  navbar-fixed-top" role="navigation">
   <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only"> Toggle navigation </span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Wisuda  </a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Loggin<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Mahasiswa</a></li>
                        <li><a href="#">Prodi</a></li>
                        <li><a href="#">BAK</a></li>
                    </ul>    
                </li>
             </ul>
        </div>
   </div> 
</div>
  <div class="row bodinya">
   <div class="span0">
     <h2>Heading</h2>
     <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
   </div>
 </div>

 <!-- Fixed Footer -->
 <div  class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
    <div class="container">
        <div class="navbar-text pull-left">
            <p>© my</p>
        </div>
    </div>
</div>
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script src="js/bootstrap.min.js"></script>
   </body>
   </html>

我想把我的图像排成一行，有一个类＆＃39; bodinya＆＃39;，我试着像上面的样式代码一样使用css，但图像没有显示。有什么帮助吗？

Answer 1

这对我有用：fiddle

我能想到的唯一问题是图像的网址是错误的，所以你可以检查一下bodinya div，看看图像是否像这张图片一样炫耀。

因此，请查看此行中的网址是否正常工作并链接到图片：

background-image:url(IMG_5555.jpg);

我希望这会有所帮助。

如何连续streraph图像bootrap

1 个答案: