Question

我正在使用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

Answer 1

我不熟悉Bootstrap或Hero-unit

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

的Div

很难通过视觉显示正在发生的事情和应该做的事情进行故障排除。但是第一眼看到我说你需要另一个带有行类的div标签。

您在代码段末尾有3个</div>，只有2个需要关闭？

新

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

没有那个类属性你的响应和英雄单位将不知道抓住它

Answer 2

所以我终于明白了。我为每个div创建了两个新类，一个用于左侧，另一个用于右侧，我将此代码放入第一个：

width: 50%;
float:left;

对于正确的人：

width: 50%;
float:right;

在那之后，对象的边缘做了一些改变以适应页面并最终得到它！

如何在没有响应的情况下在Hero-Unit内部进行两行？

2 个答案: