在引导卡元素内创建按钮数组

时间：2018-10-12 09:20:09

标签： html css bootstrap-4

我的目标是在引导卡元素内创建按钮的“网格”。它们应与容纳卡的右边界对齐，并应在其中。稍后，我将在这些按钮中填充图像，以便获得多个图像按钮。

我写了以下内容：

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 :(得分：1)

您需要对页面进行网格化，我将两个大的<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>

我要添加一个Flex布局示例（我相信您需要调整一些更改以更好地显示，这只是一个示例）：

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

答案 1 :(得分：0)

更改网格块并调整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%;
}
相关问题
最新问题