Question

我在bootstrap轮播中有一些div。这些div就像卡片一样，所以当用户点击它们时会产生翻转效果。问题是当卡片发挥作用时，卡片会因为div内容的限制而被剪切。这是jsfiddle中的一个例子：

@RequestMapping(value = "process", method = RequestMethod.POST)
    public ModelAndView process(HttpServletRequest request) {
        ModelAndView modelAndView;
        String phoneNumber = request.getParameter("phone_number");
        int amount = Integer.parseInt(request.getParameter("amount"));

        String result = validateService.validate(phoneNumber, amount);

        if (!result.equals("OK")) {
            modelAndView = new ModelAndView("start");
            modelAndView.addObject("result",result);
        }else {
            modelAndView = new ModelAndView("redirect:/check/process");
            modelAndView.addObject("phone_number",phoneNumber);
            modelAndView.addObject("amount",amount);
        }
        return modelAndView;
    }

https://jsfiddle.net/pctnpzc5/

Answer 1

您需要通过减少卡的使用或增加容器尺寸（或两者）来为您的卡留出一点空间。

.card-flip{
    height: 350px;
    width: 80%; margin:10px auto;
}

（这里我们在左右两边给出10％的边距，在顶部和底部给出10px）

像这样：https://jsfiddle.net/ten0g56s/

Bootstrapp旋转木马里面有翻转效果

1 个答案: