Начальная загрузка 4 центральных элемента внутри карты и группы списков - PullRequest
Новая
       4

Начальная загрузка 4 центральных элемента внутри карты и группы списков

0 голосов
/ 26 мая 2018

Я новичок в Bootstrap и кодировании.Я хочу знать, как я могу центрировать все пункты списка ниже?(Включая карточку).Прежде чем спросить об этом, я провел некоторое исследование Stackoverflow, но не смог заставить его работать.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
	<div class="row">
		<div class="col-lg-8">
			<div class="card">
				<div class="card-header">Featured</div>
				<div class="list-group list-group-flush"> <a href="#" class="list-group-item"><strong>MongoDB</strong>: NoSQL database</a>
					<a href="#" class="list-group-item"><strong>Angular</strong>: JavaScript framework </a>
					<a href="#" class="list-group-item"><strong>Express</strong>: Framework for Node</a>
					<a href="#" class="list-group-item"><strong>Node.js</strong>: JavaScript environment</a>
					<a href="#" class="list-group-item"><strong>ES2015</strong>: Latest version of JavaScript</a>
					<a href="#" class="list-group-item"><strong>Babel</strong>: JavaScript compiler</a>
				</div>
			</div>
		</div>
	</div>
</div>

Любой вклад будет оценен.

Ответы [ 2 ]

0 голосов
/ 26 мая 2018

Попробуйте это. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">

  <div class="card text-center">
    <div class="card-header">
      Featured
    </div>
    <div class="list-group list-group-flush"> <a href="#" class="list-group-item"><strong>MongoDB</strong>: NoSQL database</a>
      <a href="#" class="list-group-item"><strong>Angular</strong>: JavaScript framework </a>
      <a href="#" class="list-group-item"><strong>Express</strong>: Framework for Node</a>
      <a href="#" class="list-group-item"><strong>Node.js</strong>: JavaScript environment</a>
      <a href="#" class="list-group-item"><strong>ES2015</strong>: Latest version of JavaScript</a>
      <a href="#" class="list-group-item"><strong>Babel</strong>: JavaScript compiler</a>
    </div>
  </div>
</div>
0 голосов
/ 26 мая 2018

вот код для него: 

<style>
.list-group-item,.card-header {
        margin: 0 auto; /* Added */
       /* Added */
}

</style>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-8">
        <div class="card ">
          <div class="card-header">Featured</div>
          <div class="list-group list-group-flush"> <a href="#" class="list-group-item"><strong>MongoDB</strong>: NoSQL database</a>
            <a href="#" class="list-group-item"><strong>Angular</strong>: JavaScript framework </a>
            <a href="#" class="list-group-item"><strong>Express</strong>: Framework for Node</a>
            <a href="#" class="list-group-item"><strong>Node.js</strong>: JavaScript environment</a>
            <a href="#" class="list-group-item"><strong>ES2015</strong>: Latest version of JavaScript</a>
            <a href="#" class="list-group-item"><strong>Babel</strong>: JavaScript compiler</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Вы можете проверить скрипку: https://jsfiddle.net/ms3d25jt/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...