首页 文章

如何让我的Twitter Bootstrap按钮右对齐？

提问于
浏览 次
402

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

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>

我有一个无序列表，对于每个列表项，我希望左边有文本，然后是右对齐按钮 . 我试图使用右拉，但这完全弄乱了对齐 . 我究竟做错了什么？

twitter-bootstrap twitter-bootstrap-3 bootstrap-4 twitter-bootstrap-2

17 回答

  • -1

    for bootstrap 4 documentation

    <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>
    回复于
  • 2

    将 pull-right 插入class属性并让bootstrap排列按钮 .

    对于 Bootstrap 2.3 ，请参阅：http://getbootstrap.com/2.3.2/components.html#misc>帮助程序类> .pull-right .

    对于 Bootstrap 3 ，请参阅：https://getbootstrap.com/docs/3.3/css/#helper-classes>帮助程序类 .

    对于 Bootstrap 4 ，请参阅：https://getbootstrap.com/docs/4.0/utilities/float/#responsive

    pull-right 命令已删除并替换为 float-right 或通常更改为 float-{sm,md,lg,xl}-{left,right,none}

    回复于
  • 2

    在twitter bootstrap 3中尝试类 pull-right

    class="btn pull-right"
    回复于
  • 31

    “pull-right”类可能不是正确的方法，因为在使用“float：right”而不是text-align时 .

    检查bootstrap 3 css文件我在第457行找到了“text-right”类 . 这个类应该是正确对齐文本的正确方法 .

    一些代码：

    <div class="row">
    <div class="col-xs-12">
        <div class="text-right">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
</div>
    回复于
  • 244

    Update 2018 - Bootstrap 4.0.0

    pull-right 类现在在Bootstrap 4中 float-right ...

    <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列表并对行使用块元素 .

    Is float-right still not working?

    请记住 Bootstrap 4 is now flexbox ，并且许多元素都是 display:flex ，它们可以防止浮动权利起作用 . 在某些情况下，像 align-self-end 或 ml-auto 这样的util类可以正确对齐Flexbox容器内部的元素，如Bootstrap 4 .row，Card或Nav .

    还记得 text-right 仍适用于内联元素 .

    Bootstrap 4 align right examples

    Bootstrap 3

    使用 pull-right 类 .

    回复于
  • 2

    使用 button 标记而不是 input 并使用 pull-right class .

    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; }
    回复于
  • 3

    添加到接受的答案，当在从引导程序内置填充的容器和列中工作时，我有时会有一个带有子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>
    回复于
  • 9

    很抱歉回复一个较旧的已经回答的问题，但我想我会指出你的jsfiddle不起作用的几个原因，以防其他人检查出来并想知道为什么接受的答案中描述的右拉类没有在那里工作 .

    • bootstrap.css文件的url无效 . （当你问这个问题时，它可能会奏效） .

    • 您应该将属性：type = "button"添加到您的输入元素，否则它将不会呈现为按钮 - 它将呈现为输入框 . 更好的是，使用 <button> 元素代替 .

    • 此外，因为右拉使用浮动，你会得到一些交错的按钮布局，因为每个LI没有足够的高度来容纳按钮的高度 . 将一些行高或最小高度的css添加到LI将解决这个问题 .

    工作小提琴：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>

    （我还为按钮添加了一个最小宽度，因为宽度不同，我无法忍受一个粗糙的右对齐的按钮外观:)）

    回复于
  • 0

    使用Bootstrap pull-right 帮助程序对我们不起作用，因为它使用 float: right ，forces inline-block elements to become block . 当 .btn 成为 block 时，它们失去了 inline-block 提供它们作为准文本元素的自然边界 .

    所以我们在父元素上使用了 direction: rtl; ，这导致该元素内的文本从右到左布局，这也导致 inline-block 元素从右到左布局 . 您可以像下面这样使用LESS来防止孩子被安排出来 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>
    回复于
  • 17

    为该按钮应用 pull-right class . http://getbootstrap.com/css/#helper-classes-floats - >助手班

    这个链接会有所帮助

    回复于
  • 122

    对于v3.1.0，向右拉是折旧的 . 只是一个抬头 .

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

    回复于
  • 4

    你可以尝试自定义CSS除了bootstrap CSS，看看是否有任何变化 . 尝试

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

    如果它有效，那么你可以尝试操纵你拥有的东西或者为此添加其他格式并实现你想要的 . 因为你使用bootstrap并不意味着如果它没有提供你想要的东西那么你只需要管理它 . 您正在使用您的代码，因此您可以命令它按照您的说法进行操作 . 干杯!

    回复于
  • 599
    <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样式 .

    or

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

    in CSS

    li {
    line-height: 20px;
    margin: 5px;
    padding: 2px;
}
    回复于
  • 19

    现在，您需要将.dropdown-menu-right添加到现有的.dropdown-menu元素中 . 不再支持pull-right . 更多信息在这里http://getbootstrap.com/components/#btn-dropdowns

    回复于
  • 12

    你也可以使用空白列在左边给出空格

    喜欢

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

    回复于
  • 0

    在 Bootstrap 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>
    回复于
  • 2

    从 Bootstrap V3.3.1 开始，以下CSS样式将解决此问题

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

    注意：我尝试了上面帖子中的所有建议，并且都解决了旧版本的问题，并且未对新设置的bootstrap版本提供修复 .

    回复于

相关问题