Miten saan Twitter Bootstrap -painikkeet kohdistettua oikealle?

Minulla on yksinkertainen demo tässä:

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>

Minulla on järjestämätön luettelo ja jokaisen luettelon kohteen kohdalla haluan tekstin vasemmalle ja sitten oikealle kohdistetun painikkeen. Olen yrittänyt käyttää oikealle vetävää painiketta, mutta tämä sotkee kohdistuksen täysin. Mitä teen väärin?

Zim
Muokattu kysymysT33 toukokuu 2017 в 10:07
Ohjelmointi
twitter-bootstrap-2 twitter-bootstrap-3 twitter-bootstrap bootstrap-4
T55 maaliskuu 2013 в 6:11
20 näkymät
Ratkaisu

Lisää class-attribuuttiin pull-right ja anna bootstrapin järjestää painikkeet.

Bootstrap 2.3, katso: http://getbootstrap.com/2.3.2/components.html#misc > Helper classes > .pull-right.

Bootstrap 3, katso: https://getbootstrap.com/docs/3.3/css/#helper-classes > Helper classes.

Bootstrap 4, katso: https://getbootstrap.com/docs/4.0/utilities/float/#responsive.

Komento pull-right poistettiin ja korvattiin komennolla float-right tai yleisesti komennolla float-{sm,md,lg,xl}-{left,right,none}.

zwl
Muokattu vastausta T33 maaliskuu 2018 в 7:34
Kommentit (4)
 
<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>

Käytin vain layout..apply styles for li..

tai

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

CSS:ssä

li {
    line-height: 20px;
    margin: 5px;
    padding: 2px;
}
sasi
Muokattu vastausta T55 maaliskuu 2013 в 6:29
Kommentit (2)

Voitko kokeilla mukautettua CSS sivuun bootstrap CSS nähdä, jos mitään muutoksia. Kokeile

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

Jos se toimii, voit kokeilla manipuloida sitä mitä sinulla on tai lisätä muita muotoiluja tähän ja saavuttaa haluamasi. Koska käytät bootstrapia ei't tarkoita, jos se ei't tarjoa sinulle mitä haluat, niin sitten vain hallitset sen. Työskentelet koodiesi kanssa, joten käsket sitä tekemään niin kuin sanot. Kippis!

Kommentit (2)