右侧的Bootstrap img不起作用,也不显示

时间:2017-07-16 07:31:13

标签: twitter-bootstrap navbar

enter image description here

这就是我的导航栏的外观。我的问题是,正确的img并不是完全正确的。左边的Img就像我想要的那样。怎么了?我试着添加样式做img的第二个div:文本对齐但它不起作用。 这是代码:

<nav class="navbar navbar-default">
<div class="container">
    <div class="row col-md-12">
        <div class=" col-xs-2 col-sm-2 col-md-2" style="float: left" >
            <img class="img-responsive" alt="Brand" src="buty0.png">
        </div>
        <div class="col-xs-8 col-sm-8 col-md-8 text-center" style="float: left">
            <div class="navbar-text">Lorem ipsum 
       Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum  Lorem 
       ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
        </div>
        <div class=" col-xs-2 col-sm-2 col-md-2 text-left" style="float: left">
            <img class="img-responsive" alt="Brand" src="buty1.png">
        </div>
    </div>
</div>

2 个答案:

答案 0 :(得分:0)

<nav class="navbar navbar-default">

<div class="container">

    <div class="row">

        <div class="col-xs-2" >
             <img class="img-responsive" alt="Brand" src="buty0.png">
        </div>

        <div class="col-xs-8 text-center">
             <div class="navbar-text">Lorem ipsum 
   Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum  Lorem 
   ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
             </div>
        </div>

        <div class=" col-xs-2">
            <img style="float:right;" class="img-responsive" alt="Brand" src="buty1.png">
        </div>

    </div>

</div>

</nav>

答案 1 :(得分:0)

这是我的解决方案:

<nav class="navbar navbar-default">
<div class="container">
    <div class="row">
        <div class=" col-xs-2 col-sm-2 col-md-2" style="text-align:center;" >
            <img class="img-responsive" alt="Brand" src="buty0.png">
        </div>
        <div class="col-xs-8 col-sm-8 col-md-8 text-center" style="float: left">
            <div class="navbar-text">Lorem ipsum 
       Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum  Lorem 
       ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
        </div>
        <div class=" col-xs-2 col-sm-2 col-md-2" style="text-align:center;">
            <img class="img-responsive" alt="Brand" src="buty1.png">
        </div>
    </div>
</div>
</nav>