Question

如何将图像与段落的命题对齐。请参阅以下网址中的示例代码。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <img src="http://dummyimage.com/300x200/000/fff" class="img-reponsive" />
  </div>
  <div class="col-lg-8 col-md-8 col-sm-6 col-xs-12">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</div>

＆＃13;

JSfiddle Demo

Answer 1

试试这个：

<div class="container">
    <div class="col-md-12">
    <img src="http://dummyimage.com/300x200/000/fff" class="img-reponsive pull-left img-thumbnail" />       
    <p> Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever 
since the 1500s, when an unknown printer took a galley of type and 
scrambled it to make a type specimen book. It has survived not 
    </div>
</div>

或者：

<div class="container">
    <div class="row">
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <img src="http://dummyimage.com/300x200/000/fff" class="img-reponsive pull-left img-thumbnail" /></div>   
         <div class="col-lg-9 col-md-9 col-sm-6 col-xs-12">
    <p> Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever 
since the 1500s, when an unknown printer took a galley of type and 
scrambled it to make a type specimen book. It has survived not 
        industry. Lorem Ipsum has been the industry's standard dummy text ever 
since the 1500s, when an unknown printer took a galley of type and 
scrambled it to make a type specimen book. It has survived not 
       </div>
   </div>
 </div>

Answer 2

debug(download1)
download1()

这应该可以工作，只需放入表中，注意你可以调整你的引导标签（col-lg-12 col-md-12 col-sm-12 col-xs-12）

Answer 3

真的不确定你的意思，但让我们尝试清理一下代码，这可能就是你要找的东西：

容器应该有row类
属性值应该是从小到大
对于col-lg和col-md，您的总和不是12？
对于col-xs，我了解您希望图像位于顶部。
我猜你想要在屏幕大于750px时左边的图像和右边的文字。
此外，没有必要添加更大的值，它自动作为较小的值，因此如果它像col-lg那样你就不需要col-md。

所以这是干净的代码，告诉我它是否是你想要的：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="http://dummyimage.com/300x200/000/fff" class="img-reponsive" />
        </div>
        <div class="col-xs-12 col-sm-6 col-md-8">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
            has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
            publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
            has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
            publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>

图像和段落的垂直和水平中心

3 个答案: