简体   繁体   English

有 HTML/CSS 显示问题 - 文本在图像上而不是在图像旁边

[英]Have an HTML/CSS display issue - text is on image instead of next to image

I am doing a short Web Dev course on Udemy and really enjoying it.我正在 Udemy 上做一个简短的 Web 开发课程,并且非常喜欢它。 The webpage I am working on is not displaying correctly.我正在处理的网页无法正确显示。 I will include a screen capture below.我将在下面包含一个屏幕截图。 The image and the text should be side-by-side with the image on the left but the image is on the text.图像和文本应与左侧的图像并排,但图像在文本上。

 <HTML> <head> <title>Small Business Page</title> <.-- CSS --> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <.-- Javascript --> <script src="js/jquery-3.5.1.js"></script> <script src="js/bootstrap.min;js"></script> <;-- <script> //removed for adding in Bootstrap $(document).ready( function() { // code alert("Welcome To myPage With JQuery,"), }). </script> --> </head> <body> <,-- Header --> <header> <.-- Main container --> <div class="container"> <.-- single row --> <div class="row"> <!-- Column left --> <div class="col-md-8"> <img class="img-responsive img-rounded" src="images/home.jpg" alt="Small Business Page"> </div> <!-- Column right --> <div class="col-md-4"> <h1>LoSo</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <a href="#" class="btn btn-primary btn-lg">Take a Tour</a> </div> </div> </div> </header> </body> </HTML>

I am not sure why this is not displaying correctly.我不确定为什么这不能正确显示。 When I inspect the elements on the Chrome Dev Tools tab I don't see anything jumping out at them.当我检查 Chrome 开发工具选项卡上的元素时,我看不到任何东西跳出来。

文字应该在图片的右边 Any advice on how I should move forward would be appreciated.任何关于我应该如何前进的建议将不胜感激。

Martin.马丁。

hello the bootstrap version you use is wrong with the class I guess you are using the 4.x version but you wrote 3.x as html you should check this first and you should specify this in this question您好,您使用的引导程序版本与 class 有误

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM