Question

我希望我的文字保持居中，我想将它移到div的右侧。我的div有图像背景。

我尝试过改变：

<div class="col-sm-12">

为：

<div class="col-sm-12" style="float:right;">

但它没有任何效果。我有没有办法在bootstrap中执行此操作，还是必须使用我的自定义CSS？怎么能这样做呢？

HTML：

<div id="box" class="vcenter">
  <div class="container">
    <div class="row center">
      <div class="col-md-12">
        <div class="row">
          <div class="col-sm-12">
            <p>Text text text text text text text text text ext text text text text text text text/p>
              <p>Text text text text text text text text text ext text text text text text text text/p>
                <p>Text text text text text text text text text ext text text text text text text text/p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

.vcenter {
  display: flex;
  align-items: center;
}

#box {
  background: url("url here") no-repeat center;
  height: 500px;
}

.center {
  text-align: center;
}

JSFiddle Demo

Answer 1

您可以使用bootstrap＆＃39; s grid system

例如，如果您的左侧和右侧（列）宽度相同

，请执行此操作

<div class="col-xs-6">
  <p>Something left</p>
</div>
<div class="col-xs-6 center">
  <p>Something right</p>
</div>

完整的例子在这里：https://jsfiddle.net/woeote07/3/

如果您不需要左列，则可以使用偏移量。只需使用最新的bootstrap版本，因为一些较旧的版本不支持所有列类型的偏移量。

<div class="col-xs-6 col-xs-offset-6 center">

此处示例：https://jsfiddle.net/woeote07/5/

Answer 2

您的文字现在居中。如果您希望它位于页面的右侧，则无法执行'col-sm-12'，因为它会占据整个行。

相反，做这样的事情：

<div class="col-sm-6"><p>the left side</p></div>
<div class="col-sm-6"><p>Text text text text text text text text</p></div>

然后，如果您希望它在列中居中，只需指定text-align：center;他们。

Answer 3

使用bootstrap完成此操作的一种方法是添加一个单独的div，可能只有2的跨度。这实际上会将当前div推到屏幕的右侧。

     <div class="row">
        <div class="col-sm-2">
          <p>First Text Area</p>
          <p>First Text Area</p>
          <p>First Text Area</p>
        </div>
        <div class="col-sm-10">
          <p>Text text text text text text text text text ext text text text text text text text</p>
          <p>Text text text text text text text text text ext text text text text text text text</p>
          <p>Text text text text text text text text text ext text text text text text text text</p>
        </div>
      </div>

Plunker Example

否则，一个简单的解决方案就是在div的样式中添加margin-left属性，如此。

        <div class="col-sm-12" style="margin-left: 60px;">
          <p>Text text text text text text text text text ext text text text text text text text</p>
          <p>Text text text text text text text text text ext text text text text text text text</p>
          <p>Text text text text text text text text text ext text text text text text text text</p>
        </div>

Plunker Example 2

Answer 4

col-sm-12如果宽度与其父级相同，则无法浮动。指定宽度（绝对值或百分比），它可以浮动。

像这样：new Fiddle

＆＃13;

.vcenter {
  display: flex;
  align-items: center;
}

#box {
  background: url("http://2.bp.blogspot.com/-WEArLbKazLg/Ujg2PL6NG7I/AAAAAAAABSo/UZE_Z-UwPVQ/s1600/Simple-white-light-web-vector-design-image-wallpaper.jpg") no-repeat center;
  height: 500px;
}

.center {
  text-align: center;
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="box" class="vcenter">
  <div class="container">
    <div class="row center">
      <div class="col-md-12">
        <div class="row">
          <div class="col-sm-12" style="float:right; width:50%">
            <p>Text text text text text text text text text ext text text text text text text text</p>
            <p>Text text text text text text text text text ext text text text text text text text</p>
            <p>Text text text text text text text text text ext text text text text text text text</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 5

编织： http://kodeweave.sourceforge.net/editor/#0b6cf679309a05c75de936bc691576ca
分叉小提琴： https://jsfiddle.net/woeote07/4/

我希望我的文字保持居中，我希望将其移到div的右侧。

首先关闭.col-sm-12默认宽度为100％（宽度与其父级相同）。因此，您可以将其更改为50％，然后您可以使用float将文字放在右侧。

.col-sm-12 {
  float: right;
  width: 50%;
}

这是一个简单的片段！

.vcenter {
  display: flex;
  align-items: center;
}

#box {
  background: url("http://2.bp.blogspot.com/-WEArLbKazLg/Ujg2PL6NG7I/AAAAAAAABSo/UZE_Z-UwPVQ/s1600/Simple-white-light-web-vector-design-image-wallpaper.jpg") no-repeat center;
  height: 500px;
}

.center {
  text-align: center;
}

.col-sm-12 {
  float: right;
  width: 50%;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div id="box" class="vcenter">
  <div class="container">
    <div class="row center">
      <div class="col-md-12">
        <div class="row">
          <div class="col-sm-12">
            <p>Text text text text text text text text text ext text text text text text text text</p>
            <p>Text text text text text text text text text ext text text text text text text text</p>
            <p>Text text text text text text text text text ext text text text text text text text</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

将文本放在div的右侧

5 个答案: