0

Прошу помощи с сеткой бутстрапа.

Пытаюсь сделать так что бы в правом углу был блок с автоматической шириной, а по два блока в строке 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

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

	.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>

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

0
0

.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>

3
  • Здравствуйте! Очень благодарен за ответ! жаль только у меня 3 bootstrap и оно создает конфликт, буду пробовать по примеру делать. Спасибо 20 апр 2019 в 21:01
  • @Prakctoleb поправил 20 апр 2019 в 21:34
  • остальные красотульки сами) 20 апр 2019 в 21:37

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.