Question

我在页脚中有这种导航链接，但问题是我不知道它有多少元素，我想总是显示这些元素但是把它们的字体缩小了，我认为可以是在jQuery中完成，这是我现在拥有的例子：

HTML

<div class="pull-left visible-sm visible-xs visible-lg col-md-2">
        <div class="row">
            <p class="copyright"><br>
                All rights reserved
            </p>
            <h2 class="footer-heading"></h2>
            <p class="footer-tehnologies">
                Gold | Application Development
Silver | Data Platform
Cloud Accelarate
            </p>
        </div>
    </div>

<div style="height: 247px;" class="pull-right col-md-2 same-height">

    <ul class="list-inline">
        <li><a href="#"><i class="fa fa-linkedin fa-3x"></i></a></li>
        <li><a href="#"><i class="fa fa-facebook fa-3x"></i></a></li>
    </ul>
    <ul class="list-inline visible-lg visible-md">
        <li>
            <!-- Begin MailChimp Signup Form -->

            <form role="form" action="" method="post" id="contact-form-newsletter" name="mc-embedded-subscribe-form" class="validate" target="_blank">

                <p>Newsletter</p>

                <div class="form-group">
                    <div class="input-group">
                        <input class="form-control required email newsletter-input input-sm" name="EMAIL" id="mce-EMAIL" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address (user@gmail.com)" value="E-mail Address" onfocus="(this.value == 'E-mail Address') &amp;&amp; (this.value = '')" onblur="(this.value == '') &amp;&amp; (this.value = 'E-mail Address')" type="text">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <input class="form-control required name newsletter-input input-sm" name="FNAME" id="mce-FNAME" data-placement="top" data-trigger="manual" data-content="Must be at least 3 characters long, and must only contain letters" value="First Name" onfocus="(this.value == 'First Name') &amp;&amp; (this.value = '')" onblur="(this.value == '') &amp;&amp; (this.value = 'First Name')" type="text">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <input class="form-control required name newsletter-input input-sm" name="LNAME" id="mce-LNAME" data-placement="top" data-trigger="manual" data-content="Must be at least 3 characters long, and must only contain letters" value="Last Name" onfocus="(this.value == 'Last Name') &amp;&amp; (this.value = '')" onblur="(this.value == '') &amp;&amp; (this.value = 'Last Name')" type="text">
                    </div>
                </div>
      <div class="hidden">
                    <input name="b_15c7ebc4b38a04f4028aeb3a1_362be718fb" tabindex="-1" value="" type="text">

                </div>

                <div class="form-group">

                    <input name="subscribe" id="mc-embedded-subscribe" value="Subscribe" class="btn btn-info color-brand pull-left btn-send subscribe-btn" type="submit">
                </div>

            </form>
            <!--End mc_embed_signup-->
        </li>
    </ul>
    </div>

<div class="fonts-height pull-right col-md-8">
        <ul style="height: 247px;" class="nav pull-right footer-links same-height">
                <li class="fonts-height"><a href="/" class="footer-main-link fonts-height">Recruitment</a></li>

        </ul>
        <ul style="height: 247px;" class="nav pull-right footer-links same-height">
                <li class="fonts-height">Our Services</li>

                <li class="fonts-height"><a href="/">Lorem ipsum</a></li>
                <li class="fonts-height"><a href="/">Lorem ipsum</a></li>
                <li class="fonts-height"><a href="/">Lorem ipsum</a></li>
                <li class="fonts-height"><a href="/">Lorem ipsum</a></li>
                <li class="fonts-height"><a href="/">Lorem ipsum</a></li>
                <li class="fonts-height"><a href="/">Lorem ipsum</a></li>
        </ul>
        <ul style="height: 247px;" class="nav pull-right footer-links same-height">
                <li class="fonts-height">Lorem ipsum</li>

                <li class="fonts-height"><a href="/">Lorem ipsum</a></li>
                <li class="fonts-height"><a href="/">Lorem ipsum</a></li>
                <li class="fonts-height"><a href="/">Lorem ipsum</a></li>
        </ul>
        <ul style="height: 247px;" class="nav pull-right footer-links same-height">
                <li class="fonts-height">About Us</li>

                <li class="fonts-height"><a href="/">Management</a></li>
                <li class="fonts-height"><a href="/Blog">Blog</a></li>
                <li class="fonts-height"><a href="/">Partners</a></li>
                <li class="fonts-height"><a href="/">Locaties &amp; contact</a></li>
        </ul>
</div>

enter image description here

现在，在Bootstrap 3中，问题是ul.footer-links，我不知道它将包含多少元素，我希望始终将元素保留在col-md-8内是否可能？

Answer 1

尝试FitText它会调整您的文字以适应容器内部而不会包裹。

根据元素宽度bootstrap 3更改字体大小

1 个答案: