Сетка Bootstrap 3 (помощь структурой)

227

03 февраля 2020, 12:50

Прошу помощи с сеткой бутстрапа. Пытаюсь сделать так что бы в правом углу был блок с автоматической шириной, а по два блока в строке row. Но так как каждый row это отдельная строка, то либо блок который должен быть справа находиться справа но не за под лицо по горизонтали с блоками по меньше, либо остальные блоки опускаются вниз. Для полной наглядности нарисовал скрин как должно быть, не могу понять как вместить строки так , что бы блок справа был заподлицо с блоками слева. Буду безумно благодарен если подскажите как осуществить такое расположение! []

	.block_informaiton { 
		background: #ffffff; 
		padding: 14px; 
		border-radius: 14px; 
		margin: 14px; 
		text-align: center; 
        box-shadow: 0px 0px 30px -10px rgba(29,39,49,0.4); 
	} 
	 .test { 
		height: 500px; 
	}

<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">  
</head> 
<div class="row"> 
	<div class="col-sm-3 col-md-3 block_informaiton"> 
		<p>Информация об Пользователе</p> 
		<hr> 
		<b><a href="{{ app }}history">{{ user.login }}</a></b> 
	</div> 
	<div class="col-sm-3 col-md-3 block_informaiton"> 
		<p>сумма:</p> 
		<hr> 
		<ul> 
			<li class="button-container"> 
                <div class="btn btn_wallet_rub" id="twitter"><b>{{ priceformat2(user.bonus_money) }}</b></div> 
                <div class="btn btn_wallet_usd" id="facebook"><b>{{ priceformat2(user.baks_bonus_money, 'us') }}</b></div> 
            </li> 
        </ul> 
    </div> 
	<div class="col-sm-4 col-md-4 block_informaiton test">Test</div> 
</div>

]2]2

Answer 1

- Решил свой вопрос таким образом

	.block_informaiton { 
		background: #ffffff; 
		padding: 14px; 
		border-radius: 14px; 
		margin: 14px; 
		text-align: center; 
		box-shadow: 0px 0px 30px -10px rgba(29,39,49,0.4); 
	}

<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">  
</head> 
<div class="conteiner"> 
	<div class="row"> 
		<div class="col-md-7 block_informaiton"> 
			<div class="row"> 
				<div class="col-sm-5 col-md-5 block_informaiton">Test</div> 
				<div class="col-sm-5 col-md-5 block_informaiton">Test</div> 
				</div> 
				<div class="row"> 
				<div class="col-sm-5 col-md-5 block_informaiton">Test</div> 
				<div class="col-sm-5 col-md-5 block_informaiton">Test</div> 
			</div> 
		</div> 
		<div class="col-md-4 block_informaiton">Test</div> 
	</div> 
</div>

Возможно у кого то будет решение получше! ?

Answer 2

.border { 
  border: 1px solid black; 
  border-radius: 2px; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
     
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">  
    <title>Title</title> 
</head> 
 
<body> 
    <div class="container-fluid mt-2"> 
        <div class="row m-0 p-0"> 
            <div class="col-xs-12 border rounded"> 
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium nam enim ex! 
            </div> 
        </div> 
        <div class="row m-0 p-0 mt-1"> 
            <div class="col-xs-8 mr-1"> 
                <div class="row border rounded"> 
                    <div class="col-xs-6 border rounded m-1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi 
                        illo amet tempore et dolore quibusdam sequi placeat sint necessitatibus reiciendis.</div> 
                    <div class="col-xs-6 border rounded m-1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
                        Tempore, fuga. Officia aut voluptatibus harum a quibusdam, alias eaque accusamus facilis non. 
                        Repellendus repellat molestias aperiam vero architecto officia, quod quis. 
                        Nulla molestiae necessitatibus, itaque quaerat, repellat neque nihil sed vitae nobis illum ea 
                        aspernatur unde quo molestias quae nemo? Blanditiis eaque iure, repellat quasi amet quia itaque 
                        consectetur magni. Rem. 
                        Quod fuga quam beatae harum laudantium repudiandae ipsum esse, adipisci, quae aut error quis 
                        est! Voluptatem dicta veniam magni dolore quasi repellendus aspernatur soluta id modi 
                        reiciendis. Eum, exercitationem cum. 
                        Tempora consequuntur quod illo quaerat facilis quibusdam id explicabo laboriosam vel, voluptate 
                        aliquam sed consequatur nam ab! Maiores sapiente totam quisquam, suscipit impedit cupiditate 
                        ipsam, itaque nihil modi corporis architecto!</div> 
                </div> 
                <div class="row border rounded mt-1"> 
                    <div class="col-xs-6 border rounded m-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni 
                        beatae animi repudiandae atque accusantium. Quod veniam velit culpa odit nihil reiciendis 
                        asperiores quae? Ducimus, obcaecati repudiandae modi reprehenderit fugiat aliquid. 
                        Quae facilis blanditiis ratione explicabo veniam velit, eos repudiandae ab pariatur minima iusto 
                        consectetur quisquam tempore. Consequuntur laborum ratione repellendus reprehenderit aliquid 
                        exercitationem quas a eveniet pariatur eaque, alias voluptatibus. 
                        Nostrum itaque sint saepe aliquam aut dolorum, repellendus odit tempore quos repellat rerum nisi 
                        praesentium fugit autem accusantium, eius distinctio nobis totam quaerat beatae tempora modi 
                        similique? Reiciendis, aliquid et. 
                        Magni sint quasi vitae, cupiditate porro ut laudantium assumenda quaerat quos animi optio alias 
                        nam dolores voluptate. Aperiam nemo delectus cumque esse ipsam qui cupiditate porro odit iste 
                        fugiat? Maxime.</div> 
                    <div class="col-xs-6 border rounded m-1">Lorem ipsum dolor sit amet.</div> 
                </div> 
            </div> 
            <div class="col-xs-4 border rounded ml-1 mb-4"> 
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, autem quia. A eaque dolores nobis 
                dolor alias fugiat quod, perspiciatis eius et neque soluta, cupiditate, sed atque tempora consequatur 
                rem. 
                Adipisci dicta repudiandae accusantium saepe non laudantium culpa nemo eveniet, quos voluptatem eligendi 
                a, reprehenderit beatae expedita quo iste earum alias impedit libero! Sit magnam aliquid, repudiandae 
                reiciendis modi eos. 
                Cumque voluptas ad quo, quasi saepe libero facilis ipsa ipsam aut alias suscipit, quibusdam commodi? 
                Quaerat quod, voluptatum cum illo porro accusamus, eaque architecto aut sapiente commodi saepe quasi 
                quas. 
                Reprehenderit quisquam esse vitae, obcaecati nulla nam eos ullam. Doloribus asperiores dolores 
                voluptatem deleniti, vitae est, veritatis, iste totam inventore accusantium hic beatae molestiae ipsa 
                tempora error ad sit voluptas. 
                Repudiandae quasi aperiam magni quam vitae. Illum, voluptatum vero? Deserunt pariatur quaerat ut 
                consequuntur ipsum iste sint doloremque dolor dolorem ab porro, minima veritatis commodi dignissimos? 
                Hic sapiente fugit illo? 
                In consequuntur ipsam velit neque a provident facere aspernatur. Delectus dolorum harum minima fugit 
                beatae unde eaque voluptas recusandae, similique quibusdam consequatur accusantium molestias architecto 
                hic nam dolores quod rem? 
                Dolore provident culpa non laudantium reprehenderit adipisci voluptas praesentium expedita dignissimos 
                totam consequuntur nemo, deleniti officia molestias dolorum, aspernatur qui eius? Eveniet praesentium 
                aut incidunt culpa, quisquam officia. Deserunt, accusamus. 
                Quas temporibus id architecto quis facilis quidem cumque consectetur sequi enim. Debitis sapiente 
                suscipit ducimus deleniti, eligendi ipsam vitae doloribus nesciunt tempore porro, illum rem fugit facere 
                ad a id? 
                Vitae voluptatem provident cupiditate illum similique animi, reiciendis fugiat officia sed dolorum ex, 
                excepturi error quod quia alias quasi maxime necessitatibus dolores est reprehenderit. Perferendis eius 
                labore voluptas deserunt fugit. 
                Aspernatur blanditiis harum reprehenderit! Reprehenderit ea illo accusantium suscipit quasi, eos hic 
                iste ratione voluptas dignissimos nam atque et qui obcaecati ipsam saepe voluptatibus placeat 
                consequuntur blanditiis architecto voluptates omnis? 
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium perferendis minima soluta nemo ab 
                dignissimos nesciunt sapiente, laborum, aliquid impedit sint officia harum eos animi aut, eligendi 
                dolor? Nam, amet! 
                Temporibus minus voluptate eveniet animi porro vitae architecto ipsam, minima atque deserunt. Aliquid, 
                quibusdam ipsum? Dignissimos doloribus quidem, ad vitae exercitationem obcaecati sapiente molestiae esse 
                eligendi vel consectetur sed reprehenderit. 
                Laborum, voluptates. Cupiditate totam provident numquam. Beatae architecto, ducimus quidem nemo maiores 
                deleniti quia perspiciatis velit iusto molestias asperiores sit, perferendis neque ab aliquam qui 
                provident cumque nihil fugiat dicta? 
                Quasi, illum alias labore rem recusandae nulla excepturi ipsam, harum atque ea, magnam sapiente 
                accusantium suscipit tempore! Dolor, quibusdam totam voluptates qui harum nulla enim iste velit nihil. 
                Vero, optio? 
                Voluptatum, adipisci quisquam natus voluptate asperiores ex quasi omnis vitae quaerat porro praesentium, 
                qui nihil aliquid magni ullam consectetur possimus accusantium quae! Neque dignissimos rerum fugiat 
                accusantium porro consectetur? Eaque. 
                Aliquid, quam aspernatur. Perspiciatis obcaecati ipsam sint, officia quas rem facere, quam deleniti iure 
                maxime doloremque illum mollitia reprehenderit? Vitae consectetur blanditiis corrupti quia nulla 
                repudiandae laborum illum voluptatibus tenetur! 
                Sunt, culpa illo! Nam distinctio, officiis sint ad maiores, magni sunt placeat a consectetur molestias 
                dolores! Odio minus voluptate ratione illo, est sunt omnis consequuntur, dolor velit totam nostrum nisi? 
                Architecto facilis dolorem neque dolore dolor quia consequuntur accusamus, ullam ab minima nulla 
                corporis aliquam quisquam sapiente quo? Unde eveniet a excepturi quibusdam dolorem saepe quisquam, 
                nesciunt magni ex. Beatae! 
                Nemo veritatis alias architecto qui id, nam perferendis ipsa voluptatem, rerum vel tempora? Aliquid 
                laborum, possimus at tempora consequatur voluptate blanditiis sequi ipsum nulla quas molestias, 
                voluptates soluta perspiciatis beatae? 
                Omnis nemo ex dicta modi repellendus doloribus explicabo officia autem eum error saepe hic ducimus 
                commodi tempore incidunt nesciunt quos odio praesentium consectetur fuga quod, blanditiis asperiores? 
                Commodi, illum mollitia! 
                Consequatur, praesentium accusamus debitis veritatis ipsum repellendus. Odit laboriosam quod nemo 
                perferendis. A, est odio? Totam iste sit ratione maxime voluptatum tempore ipsa cumque ab iusto minus. 
                Iusto, praesentium reiciendis! 
                Nisi consequatur, neque fuga autem ipsa ipsum provident, mollitia et deserunt aliquam laboriosam, quia 
                perferendis quos sit vitae impedit repellendus totam obcaecati voluptatem nobis veniam animi aperiam? 
                Tempore, omnis quam? 
                Ullam, commodi! Consequatur qui vel facilis ad quas beatae voluptatem reprehenderit dolore laudantium 
                laborum, unde omnis totam alias ut quod nobis. Consectetur incidunt corrupti quam. Veniam doloremque ad 
                corporis reprehenderit! 
                Eaque natus tenetur itaque molestias aperiam, nulla sit culpa voluptas ipsum amet quam unde, veritatis 
                maxime explicabo voluptatibus magnam, blanditiis accusantium quis expedita aliquid provident. Aut dolore 
                autem doloremque voluptatem! 
                Repellendus alias possimus earum minima molestias doloremque quibusdam, distinctio temporibus in iusto 
                quis eligendi consequuntur modi dolore explicabo officiis. Quo nobis tempore eos voluptate iure 
                asperiores quam voluptatibus vitae laboriosam? 
                Repellat hic alias ea nemo? Assumenda tempore nisi dolorum nostrum, voluptate quos ea soluta non 
                distinctio modi autem illo qui magnam ut recusandae porro nam eius sint obcaecati dolores nihil! 
                Quis dolorum perspiciatis mollitia culpa saepe quibusdam velit dolorem excepturi atque dicta ad 
                veritatis quia explicabo, harum non voluptatibus sapiente ea? Nesciunt itaque a deserunt commodi libero, 
                quos temporibus quisquam. 
                Vitae esse error autem quas similique officia perspiciatis reprehenderit quos quaerat at rerum, hic qui 
                exercitationem ipsam et beatae aperiam quisquam doloremque natus? Unde maiores quisquam iusto doloribus 
                suscipit aliquid? 
                Libero, aperiam sequi sunt hic molestiae minus deleniti tempora facilis, ipsam eligendi laborum ipsa 
                vel. Ipsum itaque quo blanditiis deleniti facere tenetur neque consequatur fugit hic delectus. Eum, 
                voluptates nulla. 
                Modi neque alias sequi aut voluptates aliquam, laborum vero distinctio molestias nostrum doloremque quam 
                facere officiis eius magnam deserunt repellat cumque deleniti ipsum animi explicabo. Consectetur quia 
                deleniti culpa molestiae! 
            </div> 
        </div> 
    </div> 
</body> 
 
</html>