Bootstrap - 关于为移动和大屏幕移动图像的基本问题

我仍然在学习Twitter-bootstrap的基础知识，我正在继续使用从Codeacademy采用的网站布局。我的问题：在大屏幕上，我希望图像移动到最右边的并居中，其余的文字在大屏幕左侧。我很困惑，为什么我的结构不起作用，因为我添加图像到一个新的div类，但在同一行，所以不应该把它放在空白空间的文本右侧？Bootstrap - 关于为移动和大屏幕移动图像的基本问题

除了在大屏幕上移动图像，在小屏幕上，我还想让它在第二段下移动。我不知道这是否可能;这是最好的隐藏sm-down实用程序完成？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="about col-xs-12 col-lg-6"> 
 
     <h1>About Me</h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</p> 
 

 
     <div class="about col-xs-12 col-lg-6 pull-right hidden-sm-down"> 
 
     <img src="http://placehold.it/150x150" class="img-responsive img-circle" alt="" /> 
 
     </div> 
 

 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor... 
 
     </p> 
 

 
     <blockquote class="blockquote-reverse"> 
 
     <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor...</h3> 
 
     </blockquote> 
 

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

这是现在的样子VS我怎么想它看起来（蓝色）：

http://imgur.com/HLqtK2s

而且，是有什么我可以用做图像，以确保图像缩放到足够小，整个页面整齐地适合在iPhone屏幕上？

来源

2016-07-04 Ashley_L

要移动的图片，你可以考虑使用一些CSS像保证金左：30em ;.以下链接可能是您正在寻找更改列的顺序http://stackoverflow.com/questions/20671303/bootstrap-3-changing-div-order-on-small-screens-only – GoMega54

你嵌套你列...你应该<div class="col-*移动到相邻的div ......像这样：

<div class="container-fluid"> 
    <div class="row"> 
    <div class="about col-xs-12 col-lg-6"> 
     <h1>About Me</h1> 
     ... 
    </div> 
    <div class="about col-xs-12 col-lg-6"> 
     <img src="..."/> 
    </div> 
    </div> 
</div>

来源

2016-07-04 22:03:39 Vino

Bootstrap - 关于为移动和大屏幕移动图像的基本问题

回答

相关问题