Html 引导col md问题占用全宽度_Html_Twitter Bootstrap_Css

Html 引导col md问题占用全宽度

html twitter-bootstrap css

Html 引导col md问题占用全宽度,html,twitter-bootstrap,css,Html,Twitter Bootstrap,Css,我试图在我的项目中实现bootstrap，但是col-md-3占用了整个容器的宽度代码如下：- <!DOCTYPE html> <html> <head> <title>Home page </title> </head> <body> <div class="container"> <div class="row"> <div class="co

我试图在我的项目中实现bootstrap，但是col-md-3占用了整个容器的宽度

代码如下：-

<!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>  $169
          </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>$229.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>$229.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> $269.00
          </p>
        </div>
      </div>
    </div>
  </div>    
</body>
</html>


主页
特色


229.00美元

购买


229.00美元

购买


269.00美元

我不能把不同的产品放在一条线上，而是一条接一条

请帮助我，我是一个新手，我已经赶上了。

停止使用

宽度：25%

。原因是当您使用内联样式时，在html视图页面中加载时它会获得最高优先级。因此，整个引导和内联风格都变得一团糟

希望这将帮助您更快地完成项目。

避免在

col-x-*

类中使用内联

width:25%

。另外，为了支持移动宽度，请添加

col-xs-6

列xs-

没有最小屏幕大小，因此总是包含它是有意义的。这将在本帖中进一步解释。为了节省阅读时间，主要的兴趣点有：

.col xs-：电话（Plz）将引导链接添加到标题部分的页面

<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>

此外，从列中删除宽度=25%

还有，改变

<div class="containe-fluid">

到

请确保在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>


主页

我已经用bootstrap css测试了你的代码，它正常工作。

如果你使用bootstrap

col-x

类，不要添加

width

属性。

col-md-3

有自己的

width

属性。

<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>