0

I try building the demo html code as shown below.

<!DOCTYPE html>
<html lang="">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title Page</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
   <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
 </head>
 <body>
  <h1 class="text-center">Hello World</h1>

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
   <script src="Hello World"></script>
   <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aspernatur possimus dolor fuga sapiente, iusto accusantium sed, beatae incidunt doloremque facilis in perspiciatis neque iure libero assumenda sequi ea obcaecati.
   </div>
 </body>
</html>

It's showed with real width: 1170px. https://gyazo.com/0e13b41b6c619b8efb7a26e2e1b87922

But, when I try adding into view (_Layout.cshtml) in ASP.NET MVC project. Container's width looks like smaller than 1170px. https://gyazo.com/9fe838a4a0ed22f47eb0a96986747e83

Thanks for helping (bow)

Edit 1: This problem only occurs when I use Chrome browser.

Edit 2: I found out the way to fix this issue. You just need uninstall Chrome and reinstall. (I thinks It doesn't relate to Cached, cause I remove all before) Anyway, thanks you guys so much. (bow)

Long Nguyen
  • 9,898
  • 5
  • 53
  • 52
  • 1
    Possible duplicate of [100% width Twitter Bootstrap 3 template](http://stackoverflow.com/questions/18449918/100-width-twitter-bootstrap-3-template) – NightOwl888 Jul 09 '16 at 17:29
  • I'm sorry but it didn't work for me :( – Long Nguyen Jul 10 '16 at 05:45
  • Did you try the second part of the accepted answer? Since you are using Bootstrap 3.3.6, all you need to do is change `class="container"` to `class="container-fluid"`. – NightOwl888 Jul 10 '16 at 07:21
  • Thanks @NightOwl888: My problem is only when I add front-end into ASP.NET MVC project, there are problems about the actual size of the front-end when running on Chrome – Long Nguyen Jul 10 '16 at 08:08

1 Answers1

0

I have tried to create new MVC project and added your code, its width show 1140px because there are 15px padding left right of .container class. You double check on your code, are there any redundant class or style ?

trungk18
  • 19,744
  • 8
  • 48
  • 83
  • Thanks for your helping. I found out that when I run the project on the IE browser, bootstrap container's displayed with actual size. [link](https://gyazo.com/232b3cf3e6cbeda12c201ac68270855d) But, with Chrome Browser, it's suck!!! [link](https://gyazo.com/4d09418ca68bd3c380187e5c376ff678) – Long Nguyen Jul 10 '16 at 08:02
  • Long, I used Chrome. Probably It must work on Chrome before working on IE. Which version of Chrome and IE you are using? and which version of MVC? This behaviour can consider weird because I have never encountered before with MVC project. – trungk18 Jul 10 '16 at 09:38
  • Thanks you so much. Currently, I'm working on Macbook Pro 2012 running Windows 10. Even the default ASP.NET MVC Project also occurred similar case when running on Chrome browser ---------------- Firefox, IE 11, Edge -> It's working OK -------------- ASP.NET 5 MVC 5.2.3.0 Chrome Version 51.0.2704.103 m -------------------- Anyway, Thanks you so much for kindly help – Long Nguyen Jul 10 '16 at 11:05
  • Welcome Long, I am still not able to reproduce your issue. Try create new MVC project and test it up. – trungk18 Jul 10 '16 at 14:09
  • I also try to reproduce this issues by create new Project, but ... I think this issue originate from Chrome broswer. I'll try in another PC. – Long Nguyen Jul 10 '16 at 15:59
  • Glad to see your update 2. If your problem was solved, just marked this question as answered and close it :D – trungk18 Jul 11 '16 at 02:35
  • Long, next time when you are debugging using Chrome. Remember to open Developer Tool and disable cache from there to test following the below link. http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development – trungk18 Jul 11 '16 at 02:39
  • Thanks you so much (bow) – Long Nguyen Jul 11 '16 at 11:28