Создайте массив кнопок внутри элемента начальной загрузки - PullRequest
Новая
       1

Создайте массив кнопок внутри элемента начальной загрузки

0 голосов
/ 12 октября 2018

Моя цель - создать «сетку» кнопок внутри элемента начальной загрузки.Они должны быть выровнены по правой границе вмещающей карты и должны быть внутри нее.Позже я бы заполнил эти кнопки изображениями, чтобы получить несколько кнопок изображений.

Я написал следующее:

HTML: 

<div class="col-sm-20 card-deck mt-3">
  <div class="card mb-3 mr-3 ml-3 shadow bg-white rounded">
    <div id="buttonpanel" class="container buttonpanel">
      <div class="row">
        <div class="box col">Filtri</div>
        <div class="box col">Filtri</div>
        <div class="w-100"></div>
        <div class="box col">Filtri</div>
        <div class="box col">Filtri</div>
      </div>
    </div>
    <div class="card-body">
      <div id="id" style="display: none;">2 </div>
      <h4 class="card-title">
        <a href="/clinic/jeslinclinic/"> Dr Jeslin's Clinic</a>
      </h4>
      <h6 class="card-subtitle mb-2 text-muted">Label: <a href="/clinic/jeslinclinic/">jeslinclinic</a></h6>
      <p class="card-text">Phone: <a href="tel:9">9</a></p>
      <p class="card-text">About Clinic: Dr Jeslin's Eye Clinic is a topnotch Eye Clinic</p>
      <p class="card-text"><a href="/clinic/jeslinclinic/">Homepage</a></p>
      <p class="card-text">External Website: <a href="https://mysite">https://mysite</a></p>
      <div id="docbtngp" class="d-flex flex-row">
        <a href="/clinic/jeslinclinic/editclinic" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
          <i class="fas fa-user-edit"></i>
        </a>
        <a href="/clinic/jeslinclinic/live" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
          <i class="fas fa-clipboard-list"></i> Waiting</a>
        <a href="/clinic/jeslinclinic/seen" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
          <i class="fas fa-check-circle"></i> Seen</a>
        <a href="/clinic/jeslinclinic/register" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
          <i class="fas fa-book-open"></i> Register</a>
        <a href="/clinic/jeslinclinic/checkin" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
          <i class="fas fa-check"></i> Checkin</a>
        <a href="/clinic/jeslinclinic/doctor/edit/slots/2" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
          <i class="fas fa-th-large"></i> Consultation Time</a>
      </div>
    </div>
  </div>
</div>

CSS: 

.box {
  background-color: #3C8DBC;
  color: #fff;
  text-align: center;
  margin-bottom: 0px;
  margin-top: 0px;
}

.buttonpanel {
  position: relative;
  right: 0;
  height: 100%;
  top: 0px;
  margin-right:  0;
  margin-bottom:  0;
  margin-top:  0;
}

h4, .h4 {
    font-size: 1.4125rem;
    font-weight: 500;
}

Мой результат выглядит так:

Result

codepen

Требуемый результат:

Required result

Ответы [ 2 ]

0 голосов
/ 12 октября 2018

изменить блок сетки и настроить CSS.

HTML: 

<div class="row">
      <div class="box col-sm-2">Buttontext</div>
      <div class="box col-sm-4">Buttontext</div>
      <div class="box col">Buttontext</div>
 </div>
 <div class="row">
      <div class="box col-sm-2">Buttontext</div>
      <div class="box col-sm-4">Buttontext</div>
      <div class="box col">Buttontext</div>
 </div>
 <div class="row">
      <div class="box col-sm-2">Buttontext</div>
      <div class="box col-sm-4">Buttontext</div>
      <div class="box col">Buttontext</div>
 </div>

CSS: 

.box {
     background-color: #3C8DBC;
     color: #fff;
     text-align: center;
     margin: 2px;
 }

.buttonpanel {
     position: absolute;
     right: 0;
     height: 100%;
     width: 45%;
     top: 0px;
}

h4, .h4 {
    font-size: 1.4125rem;
    font-weight: 500;
}
.row {
    height: 33%;
}
0 голосов
/ 12 октября 2018

Вам нужно создать сетку страницы, я просто переместил два больших <div> в одну строку, а затем разделил их на два столбца <div class="col-md-6">, вы можете увидеть мой код (открыть его на полной странице): 

 <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Data Office Registers</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <!-- JS files for Jquery/Jquery-ui -->
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
		<style>
		.box {
			  background-color: #3C8DBC;
			  color: #fff;
			  text-align: center;
			  border: 1px solid white;
			  height: 80px;
			}



h4, .h4 {
    font-size: 1.4125rem;
    font-weight: 500;
}
My result
		</style>
    </head>
    <body >
			<div class="row mb-3 mr-3 ml-3 shadow bg-white rounded">
					<div class="col-md-6">
						<div class="card-body">
							<div id="id" style="display: none;">2 </div>
								<h4 class="card-title">
									<a href="/clinic/jeslinclinic/"> Dr Jeslin's Clinic</a>
								</h4>
								<h6 class="card-subtitle mb-2 text-muted">Label: <a href="/clinic/jeslinclinic/">jeslinclinic</a></h6>
									  <p class="card-text">Phone: <a href="tel:9">9</a></p>
									  <p class="card-text">About Clinic: Dr Jeslin's Eye Clinic is a topnotch Eye Clinic</p>
									  <p class="card-text"><a href="/clinic/jeslinclinic/">Homepage</a></p>
									  <p class="card-text">External Website: <a href="https://mysite">https://mysite</a></p>
								<div id="docbtngp" class="d-flex flex-row">
									<a href="/clinic/jeslinclinic/editclinic" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
											<i class="fas fa-user-edit"></i>
									</a>
									<a href="/clinic/jeslinclinic/live" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
									  <i class="fas fa-clipboard-list"></i> Waiting</a>
									<a href="/clinic/jeslinclinic/seen" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
									  <i class="fas fa-check-circle"></i> Seen</a>
									<a href="/clinic/jeslinclinic/register" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
									  <i class="fas fa-book-open"></i> Register</a>
									<a href="/clinic/jeslinclinic/checkin" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
									  <i class="fas fa-check"></i> Checkin</a>
									<a href="/clinic/jeslinclinic/doctor/edit/slots/2" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
									  <i class="fas fa-th-large"></i> Consultation Time</a>
								</div>
						</div>
					</div>
					<div class="col-md-6">
						<div class="container">
						  <div class="row">
							<div class="box col">Column</div>
							<div class="box col">Column</div>
							<div class="box col">Column</div>
							<div class="w-100"></div>
							<div class="box col">Column</div>
							<div class="box col">Column</div>
							<div class="box col">Column</div>
							<div class="w-100"></div>
							<div class="box col">Column</div>
							<div class="box col">Column</div>
							<div class="box col">Column</div>
						  </div>
						</div>
					</div>
		</div>
    </body>
</html>

Я добавляю пример гибкого макета (я считаю, что вам нужно настроить некоторые изменения для лучшего отображения, это всего лишь пример): 

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Data Office Registers</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <!-- JS files for Jquery/Jquery-ui -->
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
		<style>
		.box {
			  background-color: #3C8DBC;
			  color: #fff;
			  text-align: center;
			  border: 1px solid white;
			  height: 80px;
			}



h4, .h4 {
    font-size: 1.4125rem;
    font-weight: 500;
}

		</style>
    </head>
    <body >
			<div class="d-flex flex-row mb-3 mr-3 ml-3 shadow bg-white rounded">
					<div class="p-2 flex-fill">
						<div class="card-body">
							<div id="id" style="display: none;">2 </div>
								<h4 class="card-title">
									<a href="/clinic/jeslinclinic/"> Dr Jeslin's Clinic</a>
								</h4>
								<h6 class="card-subtitle mb-2 text-muted">Label: <a href="/clinic/jeslinclinic/">jeslinclinic</a></h6>
									  <p class="card-text">Phone: <a href="tel:9">9</a></p>
									  <p class="card-text">About Clinic: Dr Jeslin's Eye Clinic is a topnotch Eye Clinic</p>
									  <p class="card-text"><a href="/clinic/jeslinclinic/">Homepage</a></p>
									  <p class="card-text">External Website: <a href="https://mysite">https://mysite</a></p>
								<div id="docbtngp" class="d-flex flex-row">
									<a href="/clinic/jeslinclinic/editclinic" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
											<i class="fas fa-user-edit"></i>
									</a>
									<a href="/clinic/jeslinclinic/live" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
									  <i class="fas fa-clipboard-list"></i> Waiting</a>
									<a href="/clinic/jeslinclinic/seen" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
									  <i class="fas fa-check-circle"></i> Seen</a>
									<a href="/clinic/jeslinclinic/register" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
									  <i class="fas fa-book-open"></i> Register</a>
									<a href="/clinic/jeslinclinic/checkin" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
									  <i class="fas fa-check"></i> Checkin</a>
									<a href="/clinic/jeslinclinic/doctor/edit/slots/2" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
									  <i class="fas fa-th-large"></i> Consultation Time</a>
								</div>
						</div>
					</div>
					<div class="p-2 flex-fill">
					
						  <div class="d-flex">
							<div class="p-2 flex-fill box">Column</div>
							<div class="p-2 flex-fill box">Column</div>
							<div class="p-2 flex-fill box">Column</div>
						  </div>
							<div class="d-flex">
								<div class="p-2 flex-fill box">Column</div>
								<div class="p-2 flex-fill box">Column</div>
								<div class="p-2 flex-fill box">Column</div>
							</div>
							<div class="d-flex">
								<div class="p-2 flex-fill box">Column</div>
								<div class="p-2 flex-fill box">Column</div>
								<div class="p-2 flex-fill box">Column</div>
							</div>
					</div>
					
		</div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...