Question

我试图在我的项目中实现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>

我无法将不同的产品放在一行中，而是在另一行之下请帮助我成为一名新手并且被卷入其中。

Answer 1

避免对prepend类使用内联:first。另外，为了支持移动宽度，请添加success: function (data) { $('.the-inner-return').append("<a href='search2.php?TID="+ tid +"'>"); $('html, body').animate({ scrollTop: $('.the-inner-return a:last').offset().top }, 'slow'); }。

width: 25% 没有最小屏幕尺寸，因此始终包含它是有意义的。这篇Boostrap Grid Sizes帖子进一步解释了这一点。为了节省一些阅读，感兴趣的主要部分是：

.col-xs-：电话（＆lt; 768px）
.col-sm-：平板电脑（≥768px）
.col-md-：桌面（≥992px）
.col-lg-：桌面（≥1200px）

要添加偏移量，请使用col-x-*

＆＃13;

col-xs-6

＆＃13;

Answer 2

停止使用width:25%。原因是当您使用内联样式时，它在html视图页面中加载时具有最高优先级。因此整个引导程序和内联样式都搞砸了。

希望这有助于您的项目更快完成。

Answer 3

Plz将Bootstrap链接添加到头部分的页面

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
  if (loans) { // check if the data is present or not

    self.tableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
    return 1;

  } else { // if not present

    // Display a message when the table is empty
    UILabel *messageLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height)];

    messageLabel.text = @"No data is currently available.";
    messageLabel.textColor = [UIColor blackColor];
    messageLabel.numberOfLines = 0;
    messageLabel.textAlignment = NSTextAlignmentCenter;
    messageLabel.font = [UIFont fontWithName:@"Palatino-Italic" size:20];//
    [messageLabel sizeToFit];

    self.tableView.backgroundView = messageLabel;
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

  }

  return 0;
}

此外，从列

中删除width = 25％

另外，改变

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

到

<div class="containe-fluid">

Answer 4

请确保在html文件中加载bootstrap。

<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-md问题占全宽

4 个答案: