对齐响应文本

时间:2015-07-04 10:14:28

标签: html css twitter-bootstrap-3

我正在尝试将我的图标文本对齐到同一级别。但是,当窗口调整大小时,它们会变形,如小提琴中所示。我怎样才能让它们彼此相邻?

这是我的小提琴: https://jsfiddle.net/whywymam/72qp7c6L/

我的HTML:

                   <div id="btnTopInline">

                        <ul class= "nav navbar-nav navbar-right hidden-xs">
                                <div class="col-sm-3 col-md-3 col-lg-3">    
                                       <li>
                                         <div class="indivColl">
                                                <a href="signupLogin.php">
                                                   <img src="https://i.stack.imgur.com/pBLqM.png" class="indi">
                                                   <p class="indit">Job Seeker</p>
                                                </a>
                                         </div>
                                       </li>
                                </div>

                                <div class="col-sm-3 col-md-3 col-lg-3">
                                       <li>
                                         <div class="empColl">
                                                <a href="signupLoginEmp.php">
                                                   <img src="https://i.stack.imgur.com/Dbaoj.png" class="emp">
                                                   <p class="empt">Employer</p>
                                                </a>
                                         </div>
                                       </li>
                                </div>

                            <div class="clearfix visible-md-block"></div>

                            <div class="clearfix visible-sm-block"></div>

                            <div class="clearfix visible-lg-block"></div>

                        </ul>

                   </div><!-- end btnTopInline -->

                    <div class="col-xs-2 col-xs-push-6 padBtnRight">
                       <button type="button" class="btn btn-login visible-xs">
                            <a href="signupLogin.php">
                                Job Seeker<br>Log In
                            </a>
                        </button>
                    </div>

                   <div class="col-xs-2 col-xs-push-7">
                        <button type="button" class="btn btn-login visible-xs">
                            <a href="signupLoginEmp.php">
                                Employer<br>Log In
                            </a>
                        </button>
                   </div>

            <div class="clearfix visible-xs-block"></div>

0 个答案:

没有答案