主页 / 问题 / 1047215
Accepted
SIA
Asked:2020-11-17 21:45:42 +0800 CST2020-11-17 21:45:42 +0800 CST

中心旋转木马对齐

  • 772

面临将轮播对齐页面中心的问题。我为轮播创建了一个单独的容器，我应用了引导样式。col-lg-10 d-flex justify-content-center
但结果，元素仍然移动到网格的左边缘（带有文本的容器具有完全相同的属性并且居中）：

在此处输入图像描述

出现问题的部分代码： 

<section id="main" class="main">
		<div class="container">
			<div class="col-lg-12 d-flex justify-content-center">
				<p class="head_line">Текст который тут будет</p>
			</div>

			<div class="col-lg-10 d-flex justify-content-center">
				<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
					<ol class="carousel-indicators">
						<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
						<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
					</ol>
					<div class="carousel-inner">
						<div class="carousel-item active">
							<img class="d-block w-100" src="img/photos/photo2.jpg" alt="First slide">
						</div>
						<div class="carousel-item">
							<img class="d-block w-100" src="img/photos/photo1.jpg" alt="Second slide">
						</div>
					</div>
					<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
						<span class="carousel-control-prev-icon" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a>
					<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
						<span class="carousel-control-next-icon" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
				</div>
			</div>
		</div>
	</section>

请帮我把旋转木马居中

html

3 个回答

  1. Best Answer

    文本和轮播有不同的col-lg，如前所述 - 分别 - 用于 offsetting列的所需对齐/定位：

    在此处输入图像描述

    • 1

  2. 通过将带有旋转木马的块包装在一个单独的块中，该块延伸到所有 12 列中，解决了这个问题：

    <div class="col-lg-12 d-flex justify-content-center">
  <div class="col-lg-10 d-flex justify-content-center">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="img/photos/photo2.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="img/photos/photo1.jpg" alt="Second slide">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

    不确定这种方法是否 100% 正确。

    • 0

  3. 嗯....好吧，我不知道确切的 10 列，但结果可能是这样的：

    <div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
           <p class="head_line">Текст который тут будет</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
        </div>
        <div class="col-md-8">
            <!--Тут твоя карусель -->
        </div>
        <div class="col-md-2">
        </div>
    </div>
</div>
    • 0

相关问题