如何在Bootstrap中移动没有压缩文本的列

Question

我正在尝试移动列的边距，但之后我的文本被压缩了。在以下HTML的<p>James plays tug-o-war on the beach with Jasmine.</p>段中：

<div class="row5">
  <div class="col-lg-8 col-md-8 col-sm-7 col-xs-12">
    <h2> WELCOME </h2>
    <p class="p1"> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley. </p>
    <p class="p2">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 class="col-lg-4 col-md-4 col-sm-5 col-xs-12">
    <h2>ABOUT</h2>

    <div class="row">

      <div class="col-xs-6">
        <img src="img/avatar.png" alt="" class="img-responsive pull-right">
      </div>

      <div class="col-xs-6">
        <p>James plays tug-o-war on the beach with Jasmine.</p>
      </div>

    </div>
  </div>
</div> <!-- End row 5 -->

我试过这个，但之后文字被压缩了。

.row5 .row{
  margin-right: 5em;
}

我想联合移动两列，但不压缩文本。你知道从代码中，第一列是图片，第二列是文本。

Answer 1

看起来你要做的就是将整个行向左移动5em。这不正是margin-right: 5em;的作用。保证金权限将减少.row的整个大小。然后，这些列将占用较小可用区域的50％。

要执行您尝试执行的操作，您可以使用translateX转换，如下所示：

.myRow {
  transform: translateX(-5em);
}

实施例

Stack Snippets中的演示

＆＃13;

＆＃13;

.myRow {
  transform: translateX(-5em);
}

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<div class="row5">
  <div class="col-lg-8 col-md-8 col-sm-7 col-xs-12">
    <h2> WELCOME </h2>
    <p class="p1"> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley. </p>
    <p class="p2">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 class="col-lg-4 col-md-4 col-sm-5 col-xs-12">
    <h2>ABOUT</h2>

    <div class="row myRow">

      <div class="col-xs-6">
        <img src="http://i.imgur.com/6KUnmtF.png" alt="" class="img-responsive pull-right">
      </div>

      <div class="col-xs-6">
        <p>James plays tug-o-war on the beach with Jasmine.</p>
      </div>

    </div>
  </div>
</div> <!-- End row 5 -->

＆＃13;

＆＃13;

＆＃13;

2D变换将work on almost all browsers except ie8

Answer 2

HTML元素占用的空间与建议采用的空间一样多，如果他们没有建议占用多少空间，div-Elements将会展开。在你的情况下，你使用col-xs-6，它使你的p元素和容器浮动。现在你给的是包含那些2的行，5em的右边距，但是col-xs-6的尺寸保持不变。因此，如果你想要移动第二列，你必须采取行动。

顺便说一句，你只想对你的p采取行动，为什么不给容器一个类？

<div class="col-xs-6 makeSpace">
   <p>James plays tug-o-war on the beach with Jasmine.</p>
</div>

现在您可以定义以下内容：

.makeSpace {
  margin-right: 5em;
}

但请记住（！）col-xs-6可能已经定义了这样的余量。