在div的右侧放置文本

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

您可以使用自举的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/

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

<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：中心;给他们。

Answer 3

col-sm-12如果它具有与其父项相同的宽度，则不能浮动。指定宽度（绝对或百分比），并且可以浮动。

像这样：new Fiddle

.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; 
 
}

<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>

Answer 4

编织：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>

Answer 5

一种方式来做到这一点与引导将添加一个单独的股利，也许只有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风格。

 <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