blocks|key|380067|text|向右浮动pull-right是推荐的方式，我觉得你这样做是对的，也许你只需要使用text-align:right;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|380068|++<div+class="container">
+++++<div+class="row-fluid">
++++++<div+class="span6">
+++++++++++<p>Text+left</p>
++++++</div>
++++++<div+class="span6+pull-right"+style="text-align:right">
+++++++++++<p>text+right</p>
++++++</div>
++</div>
+</div>++++++
+</div>|code-block|syntax|javascript|380069|entityMap^0|4|A|14|H|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>To float a div to the right <code>pull-right</code> is the recommend way, I feel you are doing things right may be you only need to use <code>text-align:right;</code> </p>

<pre><code>  &lt;div class="container"&gt;
     &lt;div class="row-fluid"&gt;
      &lt;div class="span6"&gt;
           &lt;p&gt;Text left&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="span6 pull-right" style="text-align:right"&gt;
           &lt;p&gt;text right&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
 &lt;/div&gt;      
 &lt;/div&gt;
</code></pre>


blocks|key|162214|text|这就完成了任务，而不需要添加内联样式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|162215|<div+class="row-fluid">
++++<div+class="span6">
++++++++<p>text+left</p>
++++</div>
++++<div+class="span6">
++++++++<div+class="pull-right">
++++++++++++<p>text+right</p>
++++++++</div>
++++</div>
</div>|code-block|syntax|javascript|162216|答案是在"pull-right“类中嵌套另一个<div>。合并这两个类将不起作用。|offset|length|style|CODE|162217|entityMap^0|0|0|N|5|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>This does the trick, without the need to add an inline style</p>

<pre><code>&lt;div class="row-fluid"&gt;
    &lt;div class="span6"&gt;
        &lt;p&gt;text left&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="span6"&gt;
        &lt;div class="pull-right"&gt;
            &lt;p&gt;text right&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The answer is in nesting another <code>&lt;div&gt;</code> with the "pull-right" class. Combining the two classes won't work.</p>


blocks|key|380141|text|bootstrap+3有一个类，用于在div中对齐文本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|380142|<div+class="text-right">|code-block|syntax|javascript|380143|将使文本靠右对齐|380144|<div+class="pull-right">|380145|将把所有内容拉到右边，而不仅仅是文本|380146|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>bootstrap 3 has a class to align the text within a div</p>

<pre><code>&lt;div class="text-right"&gt;
</code></pre>

<p>will align the text on the right</p>

<pre><code>&lt;div class="pull-right"&gt;
</code></pre>

<p>will pull to the right all the content not only the text</p>


blocks|key|380179|text|<p+class="pull-left">Text+left</p>
<p+class="text-right">Text+right+in+same+line</p>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|380180|这对我很有效。|unstyled|380181|编辑:包含您的代码片段的示例：|380182|​|380183|@import+url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.css');
+.container+{
++++margin-top:+10px;
}|380184|<div+class="container">
++++<div+class="row-fluid">
++++++++<div+class="span6+pull-left">
++++++++++++<p>Text+left</p>
++++++++</div>
++++++++<div+class="span6+text-right">
++++++++++++<p>text+right</p>
++++++++</div>
++++</div>
</div>|380185|380186|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|T|8|@]|9|@]|A|$]]|$1|I|3|J|5|F|7|U|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|V|8|@]|9|@]|A|$B|C]]|$1|M|3|N|5|6|7|W|8|@]|9|@]|A|$B|C]]|$1|O|3|J|5|F|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|F|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<pre><code>&lt;p class="pull-left"&gt;Text left&lt;/p&gt;
&lt;p class="text-right"&gt;Text right in same line&lt;/p&gt;
</code></pre>

<p>This work for me.</p>

<p>edit: An example with your snippet:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.css');
 .container {
    margin-top: 10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="row-fluid"&gt;
        &lt;div class="span6 pull-left"&gt;
            &lt;p&gt;Text left&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="span6 text-right"&gt;
            &lt;p&gt;text right&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|380239|text|您可以指定类名称，如text-center、left或right。文本将相应地与这些类名对齐。您不需要单独创建额外的类名。这些类是在BootStrap+3和bootstrap+4中构建的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|380240|引导程序3|380241|v3+Text+Alignment+Docs|offset|length|380242|<p+class="text-left">Left+aligned+text.</p>
<p+class="text-center">Center+aligned+text.</p>
<p+class="text-right">Right+aligned+text.</p>
<p+class="text-justify">Justified+text.</p>
<p+class="text-nowrap">No+wrap+text.</p>|code-block|syntax|javascript|380243|引导程序4|380244|v4+Text+Alignment+Docs|380245|<p+class="text-xs-left">Left+aligned+text+on+all+viewport+sizes.</p>
<p+class="text-xs-center">Center+aligned+text+on+all+viewport+sizes.</p>
<p+class="text-xs-right">Right+aligned+text+on+all+viewport+sizes.</p>

<p+class="text-sm-left">Left+aligned+text+on+viewports+sized+SM+(small)+or+wider.</p>
<p+class="text-md-left">Left+aligned+text+on+viewports+sized+MD+(medium)+or+wider.</p>
<p+class="text-lg-left">Left+aligned+text+on+viewports+sized+LG+(large)+or+wider.</p>
<p+class="text-xl-left">Left+aligned+text+on+viewports+sized+XL+(extra-large)+or+wider.</p>|380246|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/css/#type-alignment|1|http://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment^0|0|0|0|M|0|0|0|0|0|M|1|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@$F|15|G|16|1|17]]|A|$]]|$1|H|3|I|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1A|8|@]|9|@$F|1B|G|1C|1|1D]]|A|$]]|$1|Q|3|R|5|J|7|1E|8|@]|9|@]|A|$K|L]]|$1|S|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

<p>You can assign the class name like text-center, left or right. The text will align accordingly to these class name. You don't need to make extra class name separately. These classes are built in BootStrap 3 and bootstrap 4.</p>

<h1>Bootstrap 3</h1>

<p><a href="http://getbootstrap.com/css/#type-alignment" rel="nofollow noreferrer">v3 Text Alignment Docs</a></p>

<pre><code>&lt;p class="text-left"&gt;Left aligned text.&lt;/p&gt;
&lt;p class="text-center"&gt;Center aligned text.&lt;/p&gt;
&lt;p class="text-right"&gt;Right aligned text.&lt;/p&gt;
&lt;p class="text-justify"&gt;Justified text.&lt;/p&gt;
&lt;p class="text-nowrap"&gt;No wrap text.&lt;/p&gt;
</code></pre>

<h1>Bootstrap 4</h1>

<p><a href="http://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment" rel="nofollow noreferrer">v4 Text Alignment Docs</a></p>

<pre><code>&lt;p class="text-xs-left"&gt;Left aligned text on all viewport sizes.&lt;/p&gt;
&lt;p class="text-xs-center"&gt;Center aligned text on all viewport sizes.&lt;/p&gt;
&lt;p class="text-xs-right"&gt;Right aligned text on all viewport sizes.&lt;/p&gt;

&lt;p class="text-sm-left"&gt;Left aligned text on viewports sized SM (small) or wider.&lt;/p&gt;
&lt;p class="text-md-left"&gt;Left aligned text on viewports sized MD (medium) or wider.&lt;/p&gt;
&lt;p class="text-lg-left"&gt;Left aligned text on viewports sized LG (large) or wider.&lt;/p&gt;
&lt;p class="text-xl-left"&gt;Left aligned text on viewports sized XL (extra-large) or wider.&lt;/p&gt;
</code></pre>


blocks|key|380299|text|像这样试一试，希望这是你想要的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|380300|<div+class="float-end">Div+floated+to+right</div>|offset|length|style|CODE|380301|entityMap^0|0|0|1D|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>Try it like this, hopefully, this is what you want.</p>
<p><code>&lt;div class=&quot;float-end&quot;&gt;Div floated to right&lt;/div&gt;</code></p>


<p>What is the proper way in <code>bootstrap</code> to float a div to the right? I thought <code>pull-right</code> was the recommend way, but it is not working.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .container {
    margin-top: 10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="row-fluid"&gt;
        &lt;div class="span6"&gt;
            &lt;p&gt;Text left&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="span6 pull-right"&gt;
            &lt;p&gt;text right&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


Twitter bootstrap float div right

在bootstrap中，将div向右浮动的正确方式是什么？我认为pull-right是推荐的方式，但它不起作用。​@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); .container {    margin-top...

问Twitter bootstrap float div right
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Twitter bootstrap float div rightEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Twitter bootstrap float div right
EN