这就是我的导航栏的外观。我的问题是,正确的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>
答案 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>