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|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|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|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: 10px;}<div class="container">    <div 

问Twitter bootstrap float div right
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Twitter bootstrap float div rightEN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Twitter bootstrap float div right
EN