Bootstrap - pozycjonowanie elementów

Hej,

Mam problem z pozycjonowaniem elementów w Bootstrapie. Struktura strony, nad którą pracuję jest taka:

• nagłówek
• tabela z danymi
• przycisk submit

Chciałbym zachować taką kolejność jak powyżej. Czy jest jakaś możliwość, aby każdy z tych elementów "opakować" w osobny kontener i pozycjonować go względem innych? Na ten moment nie wiem jak skutecznie poradzić sobie z przyciskiem submit, który z niewiadomych mi względów ląduje pomiędzy nagłówkiem a tabelą...czyli na górze strony...Siedzę nad tym od paru dni, testuję różne rozwiązania i nie mogę znaleźć czegoś, co by jakoś sensownie zadziałało...

Tak, wystarczy wpisać frazę grid bootstrap tutorial pl w google i klikać wyniki.

czysteskarpety napisał(a):

Tak, wystarczy wpisać frazę grid bootstrap tutorial pl w google i klikać wyniki.

No tak, tylko w każdym piszą coś innego i łeb już paruje od tego...

W jednym "zrób tak", w innym "pod żadnym pozorem nie róbcie w ten sposób".

Sprawa wydaje się trywialna, a ja nadal stoję w miejscu z tym. Najlepsze jest to, że część rzeczy po prostu...nie działa :)

Dlatego zapytałem tutaj, nie jestem leniwy i uwierz mi, że potrafię czytać/korzystać z googla. Po prostu w pewnym momencie poziom frustracji osiąga maksimum, zwłaszcza, jak spędzasz kilka godzin dziennie po to, żeby testować rozwiązania, które nie działają i okazuje się, że marnujesz mnóstwo czasu. Wydawałoby się, że to wszystko takie proste, a tu guzik prawda.

Ale co ci nie działa?
Wybierasz wersję 3 lub 4, potem tworzysz header/footer jak w html, container->row->col->col-md i tyle w zasadzie, tam umieszczasz tabele i poniżej button.

czysteskarpety napisał(a):

Ale co ci nie działa?
Wybierasz wersję 3 lub 4, potem tworzysz header/footer jak w html, container->row->col->col-md i tyle w zasadzie, tam umieszczasz tabele i poniżej button.

Chociażby taka sprawa:

<div class="container">
	<div class="row">
		<H1 class="text-center">Tekst, który powinien być wyśrodkowany</H1>
	</div>
</div>

To powinno zadziałać, prawda?

Raczej:

<div class="container">
    <div class="row">
		<div class="col-12 col-md-12 text-center">
			<h1>Tekst, który powinien być wyśrodkowany</h1>
		</div>
    </div>
</div>

czysteskarpety napisał(a):

Raczej:

<div class="container">
    <div class="row">
		<div class="col-12 col-md-12 text-center">
			<h1>Tekst, który powinien być wyśrodkowany</h1>
		</div>
    </div>
</div>

OK, to już rozumiem.

Ale kompletnie nie rozumiem, dlaczego przycisk, który jest na samym dole w kodzie (pod tabelą), pojawia się między nagłówkiem a rzeczoną tabelą...

<div class="container">
	<div class="row">
		<div class="col-12 col-md-12 text-center">
			<h1>Wybierz kurs z listy poniżej: </h1>
		</div>
	</div>
	<div class="row">
		<div class="col-12 col-md-12">
			<table class="table table-hover">
				<thead>
					<tr>
						<th>Coś tam 1</th>
						<th>Coś tam 2</th>
					</tr>
				</thead>
				<tbody>
					<?= form_open('_link_do_funkcji_kontrolera'); ?>
						<?php foreach($zmienna as $z) { ?>
							<tr>
								<td><?= $z->zmienna1; ?>
								<td><?= $z->zmienna2; ?>
							</tr>
						<?php } ?>
				</tbody>
					<button type="submit" class="btn btn-primary">Guzik1</button>
					<?= form_close(); ?>
			</table>
		</div>
	</div>
</div>

Musiałbyś ogarnąć devtoolsy, aby zrozumieć budowę strony:
https://sekurak.pl/analiza-kodu-stron-internetowych-w-chrome-devtools-czesc-1-wstep/
wyciągnij buttona z table powinno pomóc.

czysteskarpety napisał(a):

Musiałbyś ogarnąć devtoolsy, aby zrozumieć budowę strony:
https://sekurak.pl/analiza-kodu-stron-internetowych-w-chrome-devtools-czesc-1-wstep/
wyciągnij buttona z table powinno pomóc.

Aż mi głupio teraz...ale tak to jest jak się siedzi po nocach i człowiekowi wszystkie HTMLowe tagi mieszają się w oczach...I nie wiem czemu myślałem, że formularz będzie działać wtedy jak jest zawarty w tabeli...Dzięki za link, narzędzie bardzo się przyda!