Question

我正在为我正在构建的网站使用Twitter Bootstrap（最新版本 - 2.3.2），并希望在保持网站响应的同时实现以下目标，并为其应用最佳实践。

这是我想要的粗略草图：

(Extremely basic) Sketch of site

该网站有一个带固定导航栏的基本标题，内容流体div有三个内部div：span5，span6和span1（总共12列）。在内容div之后，粘贴有公司/版权信息的粘性页脚等。

我遇到的问题是span1列。它基本上是装饰性的（它有4个垂直颜色条，每个尺寸为25％宽度），但我希望：

垂直居中的社交链接图标（Twitter，Facebook，LinkedIn等），如黑框所示。
文本在每个彩色条内逆时针旋转90度。它每个只有一个字，并不是优先考虑的事。
每个条形拉伸以填充父容器的整个高度（在本例中为内容div），因为页面的高度当前由最高div设置，无论是span5还是span6。

我知道可能有很多方法可以实现这一点（纯CSS，javascript，背景图像平铺），但我正在寻找最佳实践：避免额外的标记，使用正确的技术，以便学习尽可能多的尽可能。我已经尝试将父容器（和内部条）设置为高度：100％;并且也使用最小高度，但是最小高度（似乎）不适用于百分比。

非常欢迎任何帮助和/或建设性的批评。

编辑：添加了JSFiddle和完整代码：JSFiddle

此外，链接到原始网站（如果JSFiddle搞砸了）：Original page

<!-- Part 1: Wrap all page content here -->
<div id="wrap">
    <!-- Fixed navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                </button> <a class="brand" href="#">Geolog&iacute;a y Telecomunicaciones, C.A.</a>

                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li><a href="#">Inicio</a>

                        </li>
                        <li><a href="#acerca-de">Acerca de</a>

                        </li>
                        <li class="active"><a href="#contacto">Contacto</a>

                        </li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
        <div>
            <div class="decorative-lightblue"></div>
            <div class="decorative-purple"></div>
            <div class="decorative-orange"></div>
            <div class="decorative-lightorange"></div>
        </div>
    </div>
    <!-- Begin page content -->
    <div class="container-fluid">
        <div class="row-fluid content clearfix" style="margin-top: 60px;">
            <div class="span5">
                <div class="row-fluid">
                    <div class="span5">
                        <div class="span12 logo"></div>
                        <div class="sidebar-intro">Construcci&oacute;n, Adaptaci&oacute;n,
                            <br/>Adecuaci&oacute;n y Remodelaci&oacute;n
                            <br/>de <span class="emphasis-red">
                                        locales<br>comerciales<br>empresariales
                                    </span>

                        </div>
                    </div>
                    <div class="span7">
                        <!-- Responsive iFrame -->
                        <div class="Flexible-container">
                            <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;ll=8.561755,-71.204721&amp;spn=0.004716,0.006571&amp;t=m&amp;z=18&amp;output=embed"></iframe>
                            <br /><small><a href="http://maps.google.com/?ie=UTF8&amp;ll=8.561755,-71.204721&amp;spn=0.004716,0.006571&amp;t=m&amp;z=18&amp;source=embed" style="color:#0000FF;text-align:left">Ver mapa m&aacute;s grande</a></small>

                        </div>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="contact-wrapper well">
                        <form>
                            <div class="control-group">
                                <label class="control-label" for="inputName"><i class="icon-user"></i> Nombre</label>
                                <div class="controls controls-row">
                                    <input type="text" class="span12 input-xlarge " id="inputName" placeholder="Su nombre completo">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="inputEmail"><i class="icon-envelope"></i> Correo electr&oacute;nico</label>
                                <div class="controls">
                                    <input type="text" class="span12 input-xlarge" id="inputEmail" placeholder="nombre@sudominio.com">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="inputEmail"><i class="icon-question-sign"></i> Asunto</label>
                                <div class="controls">
                                    <input type="text" class="span12 input-xlarge" id="inputSubject" placeholder="Asunto de su mensaje">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="inputEmail"><i class="icon-pencil"></i> Mensaje</label>
                                <div class="controls">
                                    <textarea rows="6" class="span12 input-xlarge" placeholder="Haganos llegar sus comentarios, sugerencias, consultas, etc."></textarea>
                                </div>
                            </div>
                            <div class="control-group">
                                <div class="controls">
                                    <button type="submit" class="btn btn-success">Enviar Mensaje</button>
                                </div>
                                <br class="clear">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="span6">
                <div class="row-fluid span12">
                    <img class="span9 offset2" src="http://geotelca.com/sitio/assets/img/examples/flyer_back.png">
                </div>
                <div class="row-fluid">
                    <div class="row-fluid span12 address"> <address>
                                    Zona Industrial Los Curos, Calle 1, Edif. Geotelca No. A-8, Mérida, Edo. Mérida
                                </address>

                    </div>
                    <div class="row-fluid e-mail">
                        <div class="span4 offset6"> <a href="mailto:direccion@geotelca.com">direccion@geotelca.com</a>

                        </div>
                    </div>
                </div>
            </div>
            <div class="span1 social-links">
                <div class="row-fluid vertical-bars">
                    <div class="span3 bar bar-lightblue"></div>
                    <div class="span3 bar bar-purple"></div>
                    <div class="span3 bar bar-orange"></div>
                    <div class="span3 bar bar-lightorange"></div>
                </div>
            </div>
        </div>
    </div>
    <!--/.container-fluid-->
    <div id="push"></div>
</div>
<!--/#wrap-->
<div id="footer">
    <div>
        <div class="decorative-lightblue"></div>
        <div class="decorative-purple"></div>
        <div class="decorative-orange"></div>
        <div class="decorative-lightorange"></div>
    </div>
    <div class="container">
        <p class="muted credit">Dise&ntilde;ado, codificado y mantenido por <a href="http://twitter.com/kenshin23">@kenshin23</a>

        </p>
    </div>
</div>

Answer 1

我想说你最好的选择就是在那里完成这个jQuery插件之一... eqHeight.coffee似乎有很好的记录：

https://github.com/jsliang/eqHeight.coffee/

至于在垂直空间中居中这些社交链接，你可能不得不使用更多的Javascript来做到这一点。虽然，老实说，我可能会把它们放在一个位置为：div的div容器中;并在用户滚动时让它们在该列上下滑动。

编辑：刚刚注意到你添加了你的HTML文件...在我链接到的第一个插件的情况下，你需要为你想要匹配的每个高度的列添加一个类（可能是'eq-height'）（第一个外部span5和span6然后所有的bar列div分别）。然后在jQuery文档就绪，使用：

$(document).ready(function() {
    $(".content").eqHeight(".eq-height");
});

如何使列拉伸以填充容器div（同时响应）

1 个答案: