twitter-bootstrap bootstrap col-md 问题全宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31157601/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap col-md issues taking full width
提问by Hardik Patil
I was trying to implement bootstrap in my project..But the col-md-3 is taking the full width of a container
我试图在我的项目中实现引导程序..但是 col-md-3 占用了容器的整个宽度
The following is the code:-
以下是代码：-
<!DOCTYPE html>
<html>
<head>
<title>Home page </title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4-offset-4">
<div class="avatar">
<h1>Special feature</h1>
</div>
</div>
</div>
</div>
<div class="containe-fluid">
<div class="row" >
<div class="col-md-3" style="width:25%;">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/Dell_Latitude_E4300_Laptop_1024x1024.jpeg?v=1421189962" width="300" height="300">
<p>
<a href="">Dell Latitude E4300 Refurbished Laptop<br> 9
</p>
<button> Buy</button>
</div>
</div>
<div class="col-md-3" style="width:25%;">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/HP_255_Ubuntu_Laptop_1024x1024.jpeg?v=1421190061" width="300" height="300">
<p>
<a href="#">HP 255 UBUNTU</a><br>9.00
</p>
<button> Buy</button>
</div>
</div>
<div class="col-md-3" style="width:25%;">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/621591-645880-800_large.jpeg?v=1421190099" width="300" height="300">
<p>
<a href="#">Lenovo Thinkpad B50</a><br>9.00
</p>
<button>Buy</button>
</div>
</div>
<div class="col-md-3" style="width:25%;">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/618381-636132-800_large.jpeg?v=1421190057" width="300" height="300">
<p>
<a href="#">HP 255 Quad Core</a><br> 9.00
</p>
</div>
</div>
</div>
</div>
</body>
</html>
I am unable to put the diffent products in one line and it is coming one below the other Please help me am a newbie and am caught up.
我无法将不同的产品放在一行中，并且它在另一个下面请帮助我，我是一个新手，我被赶上了。
回答by Manoj Kumar
Avoid the use of inline width: 25%for the col-x-*classes. Also for supporting mobile width, Add col-xs-6.
避免使用内联width: 25%的col-x-*类。也为了支持移动宽度，添加col-xs-6.
col-xs-has no minimum screen size, so it makes sense to always include it. This is further explained in this Boostrap Grid Sizespost. To save you some reading, the main bits of interest are:
col-xs-有没有最低的屏幕尺寸，因此是很有意义总是包含它。这在这篇Boostrap Grid Sizes帖子中有进一步的解释。为了节省您的阅读时间，您感兴趣的主要内容是：
- .col-xs-: Phones (<768px)
- .col-sm-: Tablets (≥768px)
- .col-md-: Desktops (≥992px)
- .col-lg-: Desktops (≥1200px)
- .col-xs-: 电话 (<768px)
- .col-sm-：平板电脑（≥768px）
- .col-md-：桌面（≥992px）
- .col-lg-：桌面（≥1200px）
To add offset, use col-md-offset-4
要添加偏移量，请使用 col-md-offset-4
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-md-6 col-md-offset-4">
<div class="avatar">
<h1>Special feature</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-3">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/Dell_Latitude_E4300_Laptop_1024x1024.jpeg?v=1421189962" width="300" height="300">
<p>
<a href="">Dell Latitude E4300 Refurbished Laptop<br> 9
</p>
<button> Buy</button>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/HP_255_Ubuntu_Laptop_1024x1024.jpeg?v=1421190061" width="300" height="300">
<p>
<a href="#">HP 255 UBUNTU</a>
<br>9.00
</p>
<button>Buy</button>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/621591-645880-800_large.jpeg?v=1421190099" width="300" height="300">
<p>
<a href="#">Lenovo Thinkpad B50</a>
<br>9.00
</p>
<button>Buy</button>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/618381-636132-800_large.jpeg?v=1421190057" width="300" height="300">
<p>
<a href="#">HP 255 Quad Core</a>
<br>9.00
</p>
</div>
</div>
</div>
</div>回答by Amanjot Kaur
Plz add Bootstrap link to the page in the head section
请在head部分的页面中添加Bootstrap链接
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Also, remove width=25% from the columns
另外，从列中删除 width=25%
also, change
还有，改变
<div class="containe-fluid">
to
到
<div class="container-fluid">
回答by Bogdan B
Please make sure that you load bootstrap in your html file.
请确保在 html 文件中加载引导程序。
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>Home page </title>
</head>
I have tested your code with bootstrap css and it's working like it should.
我已经用 bootstrap css 测试了你的代码，它的工作正常。
回答by Mahabub Islam Prio
Stop using width:25%. The cause is when you use inline style it gets top priority on loading in html view page . And thus the whole bootstrap and inline style gets messed up .
停止使用width:25%。原因是当您使用内联样式时，它在加载 html 视图页面时获得最高优先级。因此整个引导程序和内联样式变得一团糟。
Hope this will help your project get finished faster .
希望这将有助于您的项目更快完成。
