Question

我使用Bootstrap3在我的应用程序中创建页面。

在页面深处的某处，我有列（col-md-6），其宽度按百分比计算。我目前的目标是用一组子元素填充该元素，遵守以下规则：

每个子元素的高度必须从父元素继承;
每个子元素的宽度必须等于父元素的宽度;
子元素必须水平放置;
父元素必须具有水平滚动才能导航到元素。

如果我们使用固定值（在px中），则任务变得非常简单。像这里http://jsfiddle.net/vUEYG/

但我不知道如何用百分比值来解决它。我的意思是，我可以添加一些宽度等于N * 100％的包装元素（其中N是子元素的数量）。但接下来的问题是如何将子元素的宽度设置为100％？：）

有人可以提出建议吗？

谢谢

Answer 1

如果我理解了您的要求，我相信您可以使用flex-box来实现这一目标。

请注意，没有用于实现此功能的引导程序，只需直接css。如果有兴趣，可以对flex-box here进行相当彻底的细分。

＆＃13;

#mask {
  display: block;
  height: 100px;
  width: 100%;
  overflow-x: scroll;
}

content {
  display: flex;
  align-content: flex-start;
  width: 200%;
  height: 100%;
}

content > div {
  flex-grow: 1;
  height: 100%;
  background-color: #f00;
  border: 1px solid #fff;
}

＆＃13;

<div id="mask">
  <content>
    <div></div>
    <div></div>
  </content>
</div>

＆＃13;

Answer 2

由于您的JSFiddle在类名中使用了img引用。也许这可以解决你的挑战

http://getbootstrap.com/javascript/#carousel

这是与你想要完成的事情不同的方法

Answer 3

使用一些jQuery代码，您可以根据最外部的div宽度执行所有操作：

＆＃13;

#wrapper {
  height: 110px;
}

#containersimg {
  background-color: #bbb;
  width: 500px;
  height: 135px;
  overflow: hidden;
  overflow-x: scroll;
}

.square {
  background-color: #00b;
  float: left;
  height: 90px;
  margin: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="containersimg">
  <div id="wrapper">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</div>

＆＃13;

AND(

 RecordType.Name = "Example Record",

 ISPICKVAL(Approval_Status__c , "Approved"),

 NOT($User.Id = "xxxxxxxxxxxxxxxx1") ||

 NOT($User.ProfileId = "xxxxxxxxxxxxxxxx2"),

OR(

 ISCHANGED(Status), 

 ISCHANGED(Requestor__c),

 ISCHANGED(Department_Owner__c),

 ISCHANGED(Support_Category__c),

 ISCHANGED(Permitting_Approval_Type__c),

 ISCHANGED(State__c), 

 ISCHANGED(County__c),

 ISCHANGED(Sites__c),

 ISCHANGED(Priority__c),

 ISCHANGED(Need_by_Date__c), 

 ISCHANGED(Days_til_Due__c), 

)

)

＆＃13;

但我真的建议你使用一些插件，我建议猫头鹰Carousel： https://owlcarousel2.github.io/OwlCarousel2/

Answer 4

要水平放置元素，您需要添加float：left;在te css中指定元素

我替换了你放在链接中的.square css

.square {
   background-color: #00b;
   float: left;
   height: 90px;
   width: 18%;
   margin: 1%;
}

宽度= 18％，内容和边距=每边1％

它的工作方式相同

您可以在另一个内部创建一个列并设置bootstrap col-lg ...属性，但可能您无法使用水平滚动

父元素内部元素的水平滚动（100％宽度），百分比宽度值

4 个答案: