0

我在 Bootstrap 上做一个网络,我遇到了一些严重的问题,即使使用 Bootstrap 文档也无法解决。所以,这是我的代码:

<div class="container">
  <div class="hero-unit">
    <h2>Two Rows</h2>
        <div class="row">
          <div class="span6">
            <center>
            <img src="../img/renders/example.png" style="position: absolute; width: 200px; height= 200px; margin-top: 80px">
            <img src="../img/covers/some_image.jpg" title="Image title" class="img-rounded propiedades_imagenes">
            </center>
          </div>
        </div>
          <div class="span6">
            <div class="well" style="margin-top:130px">
              <a class="btn btn-large btn-primary" href="#link">
                <i class="icon-download"></i> Download</a>

              <a class="btn btn-large btn-inverse" href="#random.html" style="margin-left:272px">
                <i class="icon-random icon-white"></i></a>
            </div>
          </div>
        </div>

我正在尝试在 Hero-Unit 内创建两行,当我激活响应式设计时它起作用了,但是当我激活它时,页面只是在比我的更小和更大的屏幕上做一些疯狂的设计,所以我刚刚删除了指向 bootstrap-responsive.css 的链接,我放了一个“class=row”而不是“class=row-fluid”,但现在它只创建了一行而不是两行,并放置了第二行的所有内容在第一个之下。

难道我做错了什么?我知道如何通过响应式来做到这一点,但它搞砸了我所有的工作。

我想要什么以及我通过响应式设计得到什么的图像:http: //i1129.photobucket.com/albums/m518/ZoxSoft/Capturadepantalla2013-08-13alas000037_zps064f71b1.png

4

2 回答 2

0

我不熟悉 Bootstrap 或 Hero-unit

但我认为你需要另一个 Divclass="row"

如果不了解正在发生的事情和应该做什么,就很难进行故障排除。但乍一看,我说你需要另一个带有行类的 div 标签。

您提供的代码段末尾有 3 个</div>,而只有 2 个需要关闭?

新的

在您的第一个图像链接中,您看起来有很多样式但没有标题属性类属性

如果没有该类属性,您的响应式和 Hero-Unit 将不知道抓住它

于 2013-08-12T21:53:43.070 回答
0

所以我终于想通了。我为每个 div 创建了两个新类,一个用于左侧,另一个用于右侧,我将这段代码放入第一个:

width: 50%;
float:left;

对于正确的:

width: 50%;
float:right;

之后,对对象的边距进行了一些更改以适应页面,终于得到了!

于 2013-08-13T13:27:32.937 回答