Bootstrap z góry narzucony rozmiar diva ( szerokosc, wysokosc )

pytanie zadane 19 stycznia 2017 w HTML i CSS przez balti Obywatel (1,040 p.)
edycja 19 stycznia 2017 przez balti

Witam,

Tak jak w temacie chciałbym mieć z góry narzuconą szerokość i wysokość divów w bootstrapie.

Macie jakieś pomyśl, jak mogę takie coś otrzymać? ( Fajnie jakby po odpaleniu strony użytkownik, który odwiedzałby stronkę, zobaczył na swoim ekranie taki układ )

Będę za pomocą javascripta podmieniać wewnętrzny kod html tego środkowe diva i wyświetlał informację. W zależności od wciśnietego diva.

2 odpowiedzi

odpowiedź 19 stycznia 2017 przez hoktaur Pasjonat (22,250 p.)
wybrane 20 stycznia 2017 przez balti

Najlepsza

To tak na szybko:

<!DOCTYPE html>
<html lang="pl">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <style>
	div {
		border: 1px solid red;
	}
  </style>
  
</head>
<body>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">.col-sm-6</div>
    <div class="col-sm-6">.col-sm-6</div>
  </div>
  <div class="row">
    <div class="col-sm-2">
		<div class="row">.col-sm-12</div>
		<div class="row">.col-sm-12</div>
	</div>
	<div class="col-sm-8">.col-sm-8</div>
    <div class="col-sm-2">
		<div class="row">.col-sm-12</div>
		<div class="row">.col-sm-12</div>
	</div>
  </div>
   <div class="row">
    <div class="col-sm-6">.col-sm-6</div>
    <div class="col-sm-6">.col-sm-6</div>
  </div>
</div>

komentarz 20 stycznia 2017 przez balti Obywatel (1,040 p.)

Okej uzylem tych siatek z bootstrap, natomiast mam problem, bo gdy np mam w danym wierszu nazwijmy to 3 kafelki: dwie takiej samej dlugosci i jeden dluzszy to przy okresleniu marginesow w css'ie. Trace format 3 kontrolek w jednym wierszu i mi np 3 kafelka przechodzi do nastepnego wiersza... Nie wiem jak temu zaradzić

<div class="container-fluid">      
        <div class="row">
        <div class="col-md-2 col-sm-2 col-xs-12">
            <div class="row tile1">.col-md-12</div>
            <div class="row tile1">.col-md-12</div>
        </div>
        <div class="col-md-8 col-sm-8 col-xs-12 tile2" style="background-color: gray">
          <h3>Column 2</h3>
          <p>Loreen ipsum Euphoria dolor sit amet, consectetur adipiscing elit. Aliquam at mauris non odio aliquet ullamcorper id id dolor. In vitae Loreen leo. Phasellus egestas lacinia velit, ut scelerisque dolor ultricies sed. Vivamus nunc ipsum, lobortis vel commodo ac, commodo nec eros. Aliquam eleifend egestas eros nec pharetra. Duis vitae dui nisi, semper adipiscing diam. Nunc molestie porttitor lectus in aliquam. Ut pellentesque porttitor sagittis. Proin auctor porta nisl at pretium. Nulla lacinia leo et enim sollicitudin quis commodo felis mattis. Morbi eu sem ac tellus venenatis vulputate sit amet a turpis. Aliquam a Loreen neque, at pharetra urna. Loreen ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo tristique ipsum, vel vestibulum sem pellentesque vel Baku.</p>
        </div>
        <div class="col-md-2 col-sm-2 col-xs-12">   <!-- to dziwne dlaczego nie parzyste ??? -->
            <div class="row tile1">.col-md-12</div>
            <div class="row tile1">.col-md-12</div>
        </div>
</div>

css:

.tile1
{
    background-color: #3095d3;
    height: 142px;
    text-align: center;
    margin: 5px;
}