Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/37.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 使用引导转盘减小文本框的背景大小_Css_Twitter Bootstrap_Carousel - Fatal编程技术网
Fatal编程技术网
  • css/
  • Css 使用引导转盘减小文本框的背景大小

Css 使用引导转盘减小文本框的背景大小

css twitter-bootstrap

Css 使用引导转盘减小文本框的背景大小,css,twitter-bootstrap,carousel,Css,Twitter Bootstrap,Carousel,我正在使用Bootstrap4.0和carousel类。我为旋转木马中的每个图像都有一个标题，我想减小标题背景的宽度，因为它比文本宽。（见下面的黄色箭头）我使用了不同的引导类，如d-md-flex，但它将整个文本框移到了左侧 如何减小背景的宽度？文本不是动态的，所以尽管最好有一个flex选项，但我可以使用固定或最大宽度。但它需要居中 谢谢 <div class="carousel-item"> <img class="d-block w-100" src="img/t/fl

我正在使用Bootstrap4.0和carousel类。我为旋转木马中的每个图像都有一个标题，我想减小标题背景的宽度，因为它比文本宽。（见下面的黄色箭头）我使用了不同的引导类，如d-md-flex，但它将整个文本框移到了左侧

如何减小背景的宽度？文本不是动态的，所以尽管最好有一个flex选项，但我可以使用固定或最大宽度。但它需要居中

谢谢

<div class="carousel-item">
  <img class="d-block w-100" src="img/t/flowers.svg" alt="Creativity">
  <div class="carousel-caption d-none d-md-block text-dark">
    <h1 style="background-color: rgba(250, 250, 250,0.5);">Everyday Creativity</h1>
  </div>
</div>


日常创意
因此，我们需要将文本与中心对齐，宽度仅与内容的宽度一致

工作片段如下：

.carousel内部img{
宽度：100%；
身高：100%；
}
.旋转木马标题h1{
宽度：适合的内容；
保证金：自动；
}


    

  • 

  • 

  • 


每天的
日常创意
每天的创造力，每天
您可以通过
max content
或
display:table将
h1
的
宽度减小到其内容对于较旧的浏览器：



body{背景：番茄；}


最大内容
日常创意

显示：表格日常创意