我怎样才能让我的Twitter的引导按钮右对齐?(How can I get my Twitter

2019-07-21 18:12发布

我有一个简单的演示在这里:

http://jsfiddle.net/HdeZ3/1/

<ul>
    <li>One <input class="btn pull-right" value="test"></li>
    <li>Two <input class="btn pull-right" value="test2"></li>
</ul>

我有一个无序列表,并为每个列表项我想对左文本,然后一个右对齐按钮。 我曾试图用拉的权利,但这种完全搅乱对齐。 我究竟做错了什么?

Answer 1:

插入pull-right进阶级属性,让自举排列按钮。

对于引导2.3,请参阅: http://getbootstrap.com/2.3.2/components.html#misc > Helper类> .pull右。

自举3,请参阅: https://getbootstrap.com/docs/3.3/css/#helper-classes >辅助类。


自举4,请参阅: https://getbootstrap.com/docs/4.0/utilities/float/#responsive

pull-right除去,并用替换命令float-right或者通常到float-{sm,md,lg,xl}-{left,right,none}



Answer 2:

在Twitter的引导3试试类上拉右

class="btn pull-right"


Answer 3:

“右拉”级可能不是正确的做法,因为在使用“浮动:权利”,而不是文本对齐。

检查引导3 css文件,我发现在网上457“文本的权利”类该类应该是对齐文本的权利的方式。

一些代码:

<div class="row">
    <div class="col-xs-12">
        <div class="text-right">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
</div>



Answer 4:

更新2018 -引导4.0.0

pull-right类现在float-right在引导4 ...

    <div class="row">
        <div class="col-12">One <input type="button" class="btn float-right" value="test"></div>
        <div class="col-12">Two <input type="button" class="btn float-right" value="test"></div>
    </div>

http://www.codeply.com/go/nTobetXAwb

这也是最好不要对准UL列表,并使用该行的块元素。

float-right仍无法正常工作?

请记住, 引导4现在是Flexbox的 ,很多元素都display:flex ,可以防止工作浮动权。 在一些情况下,UTIL类,如align-self-endml-auto工作,以右对齐是像一个自举4 .row,卡或NaV的Flexbox的容器内的元件。

还记得text-right仍然有效的内联元素。

自举4右对齐的例子


引导3

使用pull-right的类。



Answer 5:

使用button标签,而不是input和使用pull-right的类。

pull-right班完全打乱了双方的按钮,但是你可以通过右侧定义自定义保证金解决这个问题。

<button class="btn btn-primary pull-right btn-sm RbtnMargin" type="button">Save</button>
<button class="btn btn-primary pull-right btn-sm"  type="button">Cancel</button>

然后使用下面的CSS的类

.RbtnMargin { margin-left: 5px; }


Answer 6:

容器和已建成填补从引导柱内工作时,添加到接受的答案,我有时也有一个孩子的div确实拉动是要走的路全拉伸列。

<div class="row">
  <div class="col-sm-12">
      <div class="pull-right">
            <p>I am right aligned, factoring in container column padding</p>
      </div>
  </div>
</div>

或者,把所有的列了具有第一列偏移一起添加到您的网格列(12默认情况下)的总数。

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
        This content and its sibling..
  </div>
  <div class="col-sm-4">
        are right aligned as a whole thanks to the offset on the first column and the sum of the columns used is the total available (12).
  </div>
</div>


Answer 7:

对不起,回复到旧的已经回答的问题,但我想我会指出,有几个原因,你的jsfiddle不行,万一别人检查出来,不知为什么作为接受的答案中描述的拉正确的类没有按“T那里工作。

  1. 的URL bootstrap.css文件无效。 (也许它工作时,你问的问题)。
  2. 你应该添加属性:类型=“按钮”您输入元素,否则它不会被渲染成一个按钮 - 这将呈现为一个输入框。 更好的是,使用<button>元素代替。
  3. 此外,由于右拉式使用花车,你会得到一些惊人的按键布局,因为每个L1没有足够的高度,以适应按钮的高度。 添加一些行高度或最小高度的CSS到李会解决这个问题。

工作小提琴: http://jsfiddle.net/3ejqufp6/

<ul>
  <li>One <input type="button" class="btn pull-right" value="test"/></li>
  <li>Two <input type="button" class="btn pull-right" value="test2"/></li>
</ul>

(I还添加了一个最小宽度的按钮作为我无法忍受不齐整右对齐的外观的外观,因为不同宽度的按钮:))



Answer 8:

使用引导pull-right帮手,因为它使用并没有为我们工作float: right ,这迫使inline-block元素成为block 。 而当.btn s ^变成block ,他们失去了天然的保证金inline-block是为他们提供为准文本元素。

所以不是我们使用direction: rtl; 父元素,这将导致该元素中的文本从右到左布局,以及使上inline-block元件布局从右到左,也。 您可以使用更少的像下面,防止儿童被解雇了rtl太:

/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
  direction: rtl;

  * {
    direction: ltr;
  }
}

并使用它,如:

<div class="btn-container-right">
    <button class="btn">Click Me</button>
</div>


Answer 9:

应用pull-right类的按钮。 http://getbootstrap.com/css/#helper-classes-floats - >辅助类

此链接将帮助



Answer 10:

拉权利被贬值为V3.1.0的。 只是抬起头来。

http://getbootstrap.com/components/#callout-dropdown-pull-right



Answer 11:

你可以尝试自定义CSS一边引导CSS来看看是否有任何变化。 尝试

.move-rigth{
    display: block;
    float: right;
}

如果一切正常,那么你可以尝试操纵你有什么或添加其他格式来此,实现你的愿望。 由于使用的是引导,如果它不为您提供你想要的东西,那么你只是管理这并不意味着。 你与你的代码的工作,所以你命令它做你说的。 干杯!



Answer 12:

<ul>
    <li class="span4">One <input class="btn btn-small" value="test"></li>
    <li class="span4">Two <input class="btn btn-small " value="test2"</li>
</ul>

我只是用layout..apply样式李..

要么

<ul>
    <li>One <input class="btn" value="test"></li>
    <li>Two <input class="btn" value="test2"</li>
</ul>

在CSS

li {
    line-height: 20px;
    margin: 5px;
    padding: 2px;
}


Answer 13:

现在,你需要.dropdown菜单右添加到现有的.dropdown菜单元素。 拉权不再被支持。 这里更多信息http://getbootstrap.com/components/#btn-dropdowns



Answer 14:

您还可以使用空白列给空间左

喜欢

<div class="row">
    <div class="col-md-8"></div>  <!-- blank space increase or decrease it by column # -->
        <div class="col-md-4">
            <button id="saveedit" name="saveedit" class="btn btn-success">Save</button>
        </div>
</div>

演示:: 的jsfiddle演示



Answer 15:

引导V3.3.1以下CSS样式将解决这个问题

.modal-open{
    padding-right: 0 !important;
}

注:我试着在上面的帖子和所有地址旧版本的所有建议,并没有提供修复程序newset引导版本。



Answer 16:

引导4:尝试这种方式与Flexbox的。 查看文档getbootstrap

<div class="row">
  <div class="col-md">
    <div class="d-flex justify-content-end">
      <button type="button" class="btn btn-default">Example 1</button>
      <button type="button" class="btn btn-default">Example 2</button>
    </div>
  </div>
</div>


Answer 17:

为引导4 文档

  <div class="row justify-content-end">
    <div class="col-4">
      Start of the row
    </div>
    <div class="col-4">
      End of the row
    </div>
  </div>


文章来源: How can I get my Twitter Bootstrap buttons to right align?