问题
I have a simple demo here:
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>
I have an unordered list and for each list item I wish to have text on the left and then a right aligned button. I have tried to use pull-right but this completely messes up the alignment. What am I doing wrong?
回答1:
Insert pull-right into the class attribute and let bootstrap arrange the buttons.
For Bootstrap 2.3, see: http://getbootstrap.com/2.3.2/components.html#misc > Helper classes > .pull-right.
For Bootstrap 3, see: https://getbootstrap.com/docs/3.3/css/#helper-classes > Helper classes.
For Bootstrap 4, see: https://getbootstrap.com/docs/4.0/utilities/float/#responsive
The pull-right command was removed and replaced with float-right or in general to float-{sm,md,lg,xl}-{left,right,none}
回答2:
In twitter bootstrap 3 try the class pull-right
class="btn pull-right"
回答3:
"pull-right" class may not be the right way because in uses "float: right" instead of text-align.
Checking the bootstrap 3 css file i found "text-right" class on line 457. This class should be the right way to align the text to the right.
Some code:
<div class="row">
<div class="col-xs-12">
<div class="text-right">
<button type="button" class="btn btn-default">Default</button>
</div>
</div>
</div>
回答4:
Update 2019 - Bootstrap 4.0.0
The pull-right class is now float-right in Bootstrap 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
It's also better to not align the ul list and use block elements for the rows.
Is float-right still not working?
Remember that Bootstrap 4 is now flexbox, and many elements are display:flex which can prevent float-right from working. In some cases, the util classes like align-self-end or ml-auto work to right align elements that are inside a flexbox container like a Bootstrap 4 .row, Card or Nav.
Also remember that text-right still works on inline elements.
Bootstrap 4 align right examples
Bootstrap 3
Use the pull-right class.
回答5:
Use button tag instead of input and use pull-right class.
pull-right class totally messes up both of your buttons, but you can fix this by defining custom margin on the right side.
<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>
Then use the following CSS for the class
.RbtnMargin { margin-left: 5px; }
回答6:
Adding to the accepted answer, when working within containers and columns that have built in padding from bootstrap, I sometimes have a full stretched column with a child div that does the pulling to be the way to go.
<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>
Alternately, have all your columns add up to your total number of grid columns (12 by default) along with having the first column be offset.
<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>
回答7:
Sorry for replying to an older already answered question, but I thought I'd point out a couple of reasons that your jsfiddle does not work, in case others check it out and wonder why the pull-right class as described in the accepted answer doesn't work there.
- the url to the bootstrap.css file is invalid. (perhaps it worked when you asked the question).
- you should add the attribute: type="button" to your input element, or it won't be rendered as a button - it will be rendered as an input box. Better yet, use the
<button>element instead. - Additionally, because pull-right uses floats, you will get some staggering of the button layout because each LI does not have enough height to accommodate the height of the button. Adding some line-height or min-height css to the LI would address that.
working fiddle: 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 also added a min-width to the buttons as I couldn't stand the look of a ragged right-justified look to the buttons because of varying widths :) )
回答8:
Using the Bootstrap pull-right helper didn't work for us because it uses float: right, which forces inline-block elements to become block. And when the .btns become block, they lose the natural margin that inline-block was providing them as quasi-textual elements.
So instead we used direction: rtl; on the parent element, which causes the text inside that element to layout from right to left, and that causes inline-block elements to layout from right to left, too. You can use LESS like the following to prevent children from being laid out rtl too:
/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
direction: rtl;
* {
direction: ltr;
}
}
and use it like:
<div class="btn-container-right">
<button class="btn">Click Me</button>
</div>
回答9:
In Bootstrap 4: Try this way with Flexbox. See documentation in 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>
回答10:
Pull right was depreciated as of v3.1.0 . Just a heads up.
http://getbootstrap.com/components/#callout-dropdown-pull-right
回答11:
Apply pull-right class for the button.
http://getbootstrap.com/css/#helper-classes-floats -> Helper classes
This link will help
回答12:
Can you try a custom CSS aside the bootstrap CSS to see if any changes. Try
.move-rigth{
display: block;
float: right;
}
If it works then you can try manipulating what you have or adding other formatting to this and achieving what you desire. Because you are using bootstrap doesn't mean if it doesn't offer you what you want then you just manage it. You are working with your codes and so you command it to do as you say. Cheers!
回答13:
<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>
i just used layout..apply styles for li..
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;
}
回答14:
Now you need to add .dropdown-menu-right to the existing .dropdown-menu element. pull-right is not supported anymore. More info here http://getbootstrap.com/components/#btn-dropdowns
回答15:
you can also use blank columns to give spaces on left
like
<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>
Demo :: Jsfiddle demo
回答16:
From Bootstrap V3.3.1 the following CSS style will solve this issue
.modal-open{
padding-right: 0 !important;
}
Note: I tried all the suggestions in posts above and all addresses older versions and do not provide a fix to newset bootstrap versions.
回答17:
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>
来源：https://stackoverflow.com/questions/15446189/how-can-i-get-my-twitter-bootstrap-buttons-to-right-align