Question

我试图实现这个简单的例子

我添加到我的图片，课程msg.save # will run the before_save callback above Message.new.save # will NOT run the before_save callback above

这是我的代码：

img-responsive

观看此示例只是不调整图像大小...虽然我确实喜欢这个例子。

我的网站出了点问题......我想。 Bootrstrap已加载。

link my site

例如，如果我添加到徽标类<div class="image"> <img width="500" height="330" src="http://dgprint.dg-site.com/wp-content/uploads/2015/03/image-500x330.jpg" class="img-responsive" alt="image"> </div>工作，这意味着加载了引导函数。

img-rounded

我不明白为什么不调整图片大小。请告诉我，我错在哪里？

提前致谢！

Answer 1

你有这个部分

.container {
      width: 1080px;
      margin: 0 auto;
      position: relative;
}

您需要使用媒体查询将其更改为100％。找到一些断点并使用Chrome或Firebug中的inpect元素检查您的css。它只是具有固定宽度的CSS。

Answer 2

这将解决您的问题 -

您已将CSS设置为 -

.container {
  width: 1080px;
}

修改它 -

.container {
  max-width: 1080px;
}

在每个container课程中更改此内容。这也将调整您的图像大小

修改

您的网站没有准备好Bootstrap。你到处都使用了错误的课程。提示：

整个网站只有一个container课程。

所有row必须嵌套在container
下
所有columns必须强制成为row
的孩子

Answer 3

你确定你有所有对boostrap的调用吗？

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

或者下载了DIST

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Answer 4

我见过你的网站http://dgprint.dg-site.com/ 你还没有添加img-responsive类。我也看到你没有引入bootstrap提供的colum级别结构。

有这种结构（我已从你的网站上获取此代码）

<div class="container">
                        <div class="row">   <div class="the-content col-md-6">
                                <h1 class="title">
                                    <a href="http://dgprint.dg-site.com/?p=15" title="OUR EXPERIENCE">
                                        OUR EXPERIENCE                                  </a>
                                </h1>
                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

                                                            </div><!-- the-content -->
                            <div class="image col-md-6">
                                <img height="330" src="http://dgprint.dg-site.com/wp-content/uploads/2015/03/image-500x330.jpg" class="attachment-home-post wp-post-image img-responsive" alt="image">                          </div>
                        </div></div>

为什么不调整图片大小？引导

4 个答案: