Minulla on yksinkertainen demo tässä:
<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?
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}
.
<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;
}
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!