bootstrap col-md 问题全宽

Question

bootstrap col-md 问题全宽

我试图在我的项目中实现引导程序..但是 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>

Run Code Online (Sandbox Code Playgroud)

我无法将不同的产品放在一行中，并且它在另一个下面请帮助我，我是一个新手，我被赶上了。

Answer 1

Man*_*mar 5

避免使用内联width: 25%的col-x-*类。同样为了支持移动宽度，添加col-xs-6.

col-xs-有没有最低的屏幕尺寸，因此是很有意义总是包含它。这在这篇Boostrap Grid Sizes帖子中有进一步的解释。为了节省您的阅读时间，您感兴趣的主要部分是：

.col-xs-: 电话 (<768px)
.col-sm-: 平板电脑 (?768px)
.col-md-: 桌面 (?992px)
.col-lg-: 桌面 (?1200px)

要添加偏移量，请使用 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>  $169
          </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>$229.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>$229.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>$269.00
        </p>
      </div>
    </div>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，3 月前
查看次数：	12326 次
最近记录：	9 年，9 月前