Bootstrap 4传送带定位和控件

时间:2018-12-04 03:00:07

标签: bootstrap-4 alignment carousel

我正在努力对齐轮播导航控件和文本。尝试了很多事情,但仍然无法弄清楚。 正如您在图像上看到的,控件太靠近内部文本。

  1. 如何将左右控件移至边缘?
  2. 如何更改文本div的宽度? (我尝试使用w-75,但随后所有文本均未向左对齐)

谢谢!

enter image description here

 <div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
              <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner " role="listbox">
              <div class="carousel-item  active style="width:100%">

                <div class="d-flex h-100  align-items-center justify-content-center p-5" >
                  <h1>Do you know if your dog advisor is a sales guy ? Do you know if your dog advisor is a sales guy ?  
                      Do you know if your financial advisor is a sales guy or is truly represents yours best interest?
                  </h1>
                </div>
              </div>
              <div class="carousel-item">
                <div class="d-flex h-100 align-items-center justify-content-center p-5">
                  <h1>Do you know if your dog advisor is a sales guy ? Do you know if your dog advisor is a sales guy ?</h1>
                </div>
              </div>
              <div class="carousel-item">
                <div class="d-flex h-100 align-items-center justify-content-center p-5">
                  <h1>Do you know if your dog advisor is a sales guy ? Do you know if your dog advisor is a sales guy ?</h1>
                </div>
              </div>
            </div>

            <!-- Left and right controls -->
            <a class="carousel-control-prev" href="#myCarousel"  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="#myCarousel"  data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>


          </div>

0 个答案:

没有答案